前端vue过滤器,vue常用过滤器
这篇文章主要分享的是某视频剪辑软件中的局部过滤器和全局过滤器代码实操，下面文章主要以代码展现，具有一的的知识参考性，需要的小伙伴可以参考一下
v-model：绑定的价值
v-bind：绑定的类型
超文本标记语言
头
脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本
/头
身体
div id=应用程序
p{{ msg }}/p
div v-show=showInput
p请选择自己的性别：/p
输入类型=radio name=sex value=man /男
输入类型= radio name= sex value= woman /女
/div
div v-if=showInput
输入类型=radio name=sex value=man /男
输入类型= radio name= sex value= woman /女
/div
div-否则
p请自行输入自己的性别：/p
输入v-bind:value= sex type= text placeholder=请输入其他内容/
输入：value=sex :type=button/
/div
输入类型= button value= click me v-on:click= clike me
输入类型=按钮值=显示/隐藏radio @click=showInput=！显示输入
差异
输入类型= text v-model= input text placeholder=请输入内容 /
输入类型= text v-model= input text placeholder=请输入内容 /
p { { input text checkIsNullorEmpty } }/p
/div
差异
输入v-model= sex text type= radio name= sex value= man /男
输入v-model= sex text type= radio name= sex value= woman /女
p您选择的性别为：{{ sexText }}/p
p您选择的性别为：{{ sexTextsexFilter }}/p
/div
差异
p数据列表" {b} "中的v-for=(a，b)，{{a}}/p
p v-for= a in dataList"{ a } }/p
/div
差异
select v-model= select value name= name id= name
选项dataList中的v-for=(item，index :value= index { item } }/option
/选择
p选中的用户是：{ {选择值选择筛选器(数据列表)} }/p
/div
/div
脚本
//js的注释
//console.log(11111 )
const vm=new Vue({
el: #app ，//el代表某视频剪辑软件主体
//eslint编码规范
//定义参数的时候，值必须用单引号
//方法名和括号之间需要一个空格
//如果有多个参数，逗号后面需要一个空格
data () {
返回{
消息： 这是一段信息，
showInput: true，
性： 我也不知道，
按钮："按钮",
输入文本："",
性短信： ,
数据列表：[
张晓，
王晓，
小红
],
选择值：0
}
},
方法：{
clikeme() {
console.log(abcd )
}
},
过滤器：{
//有参过滤器，有参过滤器的参数是被修饰的那个值自身传递的参数
选择过滤器：函数(席德，数据列表){
console.log(sid:，sid)
console.log(数据列表)
返回数据列表[希德]
},
//无参过滤器，无参过滤器的参数是被修饰的那个值自身
checkIsNullorEmpty(val){
if (val===null val===){
返回暂无数据
}否则{
返回值
}
},
性过滤器(性){
if(sex===man){
返回男性
} else if (sex===woman){
返回女性
}
}
}
})
/脚本
/body
/html
全局过滤器：
超文本标记语言
头
脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本
/头
身体
div id=应用程序
p{{ msg }}/p
div v-show=showInput
p请选择自己的性别：/p
输入类型=radio name=sex value=man /男
输入类型= radio name= sex value= woman /女
/div
div v-if=showInput
输入类型=radio name=sex value=man /男
输入类型= radio name= sex value= woman /女
/div
div-否则
p请自行输入自己的性别：/p
输入v-bind:value= sex type= text placeholder=请输入其他内容/
输入：value=sex :type=button/
/div
输入类型= button value= click me v-on:click= clike me
输入类型=按钮值=显示/隐藏radio @click=showInput=！显示输入
差异
输入类型= text v-model= input text placeholder=请输入内容 /
输入类型= text v-model= input text placeholder=请输入内容 /
p { { input text checkIsNullorEmpty } }/p
/div
差异
输入v-model= sex text type= radio name= sex value= man /男
输入v-model= sex text type= radio name= sex value= woman /女
p您选择的性别为：{{ sexText }}/p
p您选择的性别为：{{ sexTextsexFilter }}/p
/div
差异
p数据列表" {b} "中的v-for=(a，b)，{{a}}/p
p v-for= a in dataList"{ a } }/p
/div
差异
select v-model= select value name= name id= name
选项dataList中的v-for=(item，index :value= index { item } }/option
/选择
p选中的用户是：{ {选择值选择筛选器(数据列表)} }/p
/div
差异
p{{countmiao}} /p
input type= button value= add add @ click= addValue /
/div
/div
脚本
Vue.filter(苗，函数(瓦尔)
{返回val=val
})
//js的注释
Vue.filter(add ，函数(val){ val=val
}) //console.log(11111 )
const vm=new Vue({
el: #app ，//el代表某视频剪辑软件主体
//eslint编码规范
//定义参数的时候，值必须用单引号
//方法名和括号之间需要一个空格
//如果有多个参数，逗号后面需要一个空格
data () {
返回{
消息： 这是一段信息，
showInput: true，
计数：0,
性： 我也不知道，
按钮："按钮",
输入文本："",
性短信： ,
数据列表：[
张晓，
王晓，
小红
],
选择值：0
}
},
方法：{
clikeme() {
console.log(abcd )
},
addValue(){
this.count=1
}
},
过滤器：{
//有参过滤器，有参过滤器的参数是被修饰的那个值自身传递的参数
选择过滤器：函数(席德，数据列表){
console.log(sid:，sid)
console.log(数据列表)
返回数据列表[希德]
},
//无参过滤器，无参过滤器的参数是被修饰的那个值自身
checkIsNullorEmpty(val){
if (val===null val===){
返回暂无数据
}否则{
返回值
}
},
性过滤器(性){
if(sex===man){
返回男性
} else if (sex===woman){
返回女性
}
}
}
},
)
/脚本
/body
/html
到此这篇关于某视频剪辑软件中的局部过滤器和全局过滤器代码实操的文章就介绍到这了，更多相关某视频剪辑软件中的局部过滤器和全局过滤器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。