vue中的局部过滤器和全局过滤器代码实操
更新时间：2022年02月21日 09:58:29 作者：苗苗大佬
这篇文章主要分享的是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中的局部过滤器和全局过滤器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue3+Element Plus使用svg加载iconfont的处理方法
这篇文章主要介绍了Vue3+Element Plus使用svg加载iconfont的解决方案,本文详细介绍了如何在Element Plus中使用iconfont，简单的说就是要将其封装成SVG，并且支持动态修改颜色，需要的朋友可以参考下2022-08-08
vue3:vue2中protoType更改为config.globalProperties问题
这篇文章主要介绍了vue3:vue2中protoType更改为config.globalProperties问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue使用vue-cli创建项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了vue computed的set方法无效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
Vue3+Vite+TS实现二次封装element-plus业务组件sfasga
这篇文章主要介绍了在Vue3+Vite+TS的基础上实现二次封装element-plus业务组件sfasga，下面文章也将围绕实现二次封装element-plus业务组件sfasga的相关介绍展开相关内容，具有一定的参考价值，需要的小伙伴可恶意参考一下2021-12-12
这篇文章主要介绍了vue使用once修饰符,使事件只能触发一次问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了vue使用echarts实现水平柱形图实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了Vue 展示.md文件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Vue3封装ant-design-vue表格，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
探通过本篇文章给大家探讨不同场景下组件间的数据“交流”的Vue实现方法，感兴趣的朋友一起看看吧2017-08-08
最新评论