vue中的局部过滤器和全局过滤器代码实操
作者：苗苗大佬
这篇文章主要分享的是vue中的局部过滤器和全局过滤器代码实操，下面文章主要以代码展现，具有一的的知识参考性，需要的小伙伴可以参考一下
v-model：绑定的value
v-bind：绑定的type
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<div v-show="showInput">
<p>请选择自己的性别：</p>
<input type="radio" name="sex" value="man" /> 男
<input type="radio" name="sex" value="woman" /> 女
</div>
<div v-if="showInput">
<input type="radio" name="sex" value="man" /> 男
<input type="radio" name="sex" value="woman" /> 女
</div>
<div v-else>
<p>请自行输入自己的性别：</p>
<input v-bind:value="sex" type="text" placeholder="请输入其他内容 "/>
<input :value="sex" :type="button"/>
</div>
<input type="button" value="click me" v-on:click="clikeme">
<input type="button" value="显示/隐藏radio" @click="showInput=!showInput">
<div>
<input type="text" v-model="inputText" placeholder="请输入内容" />
<input type="text" v-model="inputText" placeholder="请输入内容" />
<p>{{ inputText|checkIsNullorEmpty }}</p>
</div>
<div>
<input v-model="sexText" type="radio" name="sex" value="man" /> 男
<input v-model="sexText" type="radio" name="sex" value="woman" /> 女
<p>您选择的性别为： {{ sexText }}</p>
<p>您选择的性别为： {{ sexText|sexFilter }}</p>
</div>
<div>
<p v-for="(a,b) in dataList">{{b}},{{a}}</p>
<p v-for="a in dataList">{{a}}</p>
</div>
<div>
<select v-model="selectValue" name="name" id="name">
<option v-for="(item,index) in dataList" :value="index"> {{ item }}</option>
</select>
<p> 选中的用户是：{{ selectValue|selectFilter(dataList) }}</p>
</div>
</div>
<script>
// js的注释
// console.log("11111")
const vm = new Vue({
el: '#app', // el代表vue主体
// eslint编码规范
// 定义参数的时候，值必须用单引号
// 方法名和括号之间需要一个空格
// 如果有 多个参数，逗号后面需要一个空格
data () {
return {
msg: '这是一段信息',
showInput: true,
sex: '我也不知道',
button: 'button',
inputText: '',
sexText: '',
dataList: [
'xiaozhang',
'xiaowang',
'xiaohong'
],
selectValue: 0
}
},
methods: {
clikeme() {
console.log("abcd")
}
},
filters: {
// 有参过滤器，有参过滤器的参数是被修饰的那个值自身+传递的参数
selectFilter:function (sid,dataList){
console.log('sid:',sid)
console.log(dataList)
return dataList[sid]
},
// 无参过滤器，无参过滤器的参数是被修饰的那个值自身
checkIsNullorEmpty(val){
if (val === null || val === ''){
return '暂无数据'
} else {
return val
}
},
sexFilter(sex){
if(sex === 'man'){
return '男性'
} else if (sex === 'woman'){
return '女性'
}
}
}
})
</script>
</body>
</html>全局过滤器：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<div v-show="showInput">
<p>请选择自己的性别：</p>
<input type="radio" name="sex" value="man" /> 男
<input type="radio" name="sex" value="woman" /> 女
</div>
<div v-if="showInput">
<input type="radio" name="sex" value="man" /> 男
<input type="radio" name="sex" value="woman" /> 女
</div>
<div v-else>
<p>请自行输入自己的性别：</p>
<input v-bind:value="sex" type="text" placeholder="请输入其他内容 "/>
<input :value="sex" :type="button"/>
</div>
<input type="button" value="click me" v-on:click="clikeme">
<input type="button" value="显示/隐藏radio" @click="showInput=!showInput">
<div>
<input type="text" v-model="inputText" placeholder="请输入内容" />
<input type="text" v-model="inputText" placeholder="请输入内容" />
<p>{{ inputText|checkIsNullorEmpty }}</p>
</div>
<div>
<input v-model="sexText" type="radio" name="sex" value="man" /> 男
<input v-model="sexText" type="radio" name="sex" value="woman" /> 女
<p>您选择的性别为： {{ sexText }}</p>
<p>您选择的性别为： {{ sexText|sexFilter }}</p>
</div>
<div>
<p v-for="(a,b) in dataList">{{b}},{{a}}</p>
<p v-for="a in dataList">{{a}}</p>
</div>
<div>
<select v-model="selectValue" name="name" id="name">
<option v-for="(item,index) in dataList" :value="index"> {{ item }}</option>
</select>
<p> 选中的用户是：{{ selectValue|selectFilter(dataList) }}</p>
</div>
<div>
<p>{{count|miao}} </p>
<input type="button" value="add add" @click='addValue'/>
</div>
</div>
<script>
Vue.filter('miao',function(val)
{ return val+=val
})
// js的注释
Vue.filter('add',function(val){ val+=val
}) // console.log("11111")
const vm = new Vue({
el: '#app', // el代表vue主体
// eslint编码规范
// 定义参数的时候，值必须用单引号
// 方法名和括号之间需要一个空格
// 如果有 多个参数，逗号后面需要一个空格
data () {
return {
msg: '这是一段信息',
showInput: true,
count:0,
sex: '我也不知道',
button: 'button',
inputText: '',
sexText: '',
dataList: [
'xiaozhang',
'xiaowang',
'xiaohong'
],
selectValue: 0
}
},
methods: {
clikeme() {
console.log("abcd")
},
addValue(){
this.count+=1
}
},
filters: {
// 有参过滤器，有参过滤器的参数是被修饰的那个值自身+传递的参数
selectFilter:function (sid,dataList){
console.log('sid:',sid)
console.log(dataList)
return dataList[sid]
},
// 无参过滤器，无参过滤器的参数是被修饰的那个值自身
checkIsNullorEmpty(val){
if (val === null || val === ''){
return '暂无数据'
} else {
return val
}
},
sexFilter(sex){
if(sex === 'man'){
return '男性'
} else if (sex === 'woman'){
return '女性'
}
}
}
},
)
</script>
</body>
</html>到此这篇关于vue中的局部过滤器和全局过滤器代码实操的文章就介绍到这了,更多相关vue中的局部过滤器和全局过滤器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！