vue中的filters,vue.filter在vue中的使用
本文主要介绍了Vue的数据和事件绑定以及过滤过滤，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
Vue数据绑定单向绑定双向绑定值绑定事件绑定事件处理程序事件修饰符键修饰符类和样式绑定类绑定内联样式过滤器过滤器摘要
Vue数据绑定
单向绑定
将模型绑定到视图后，当用JavaScript代码更新模型时，视图将自动更新。(模型——视图)
单向绑定的实现过程是：
所有数据仅保存一份副本。一旦数据发生变化，就更新页面(只更新data——DOM，不更新DOM——data)。如果用户对页面进行了更新，则手动收集(双向绑定自动收集)并将其合并到原始数据中。单向绑定的应用：
(1)插值绑定:是数据绑定的基本形式，用{{}}实现。
(2)v-bind绑定:如果HTML的某些属性可以支持单向绑定，那么只需要在属性前面加上v-bind指令，这样Vue在解析的时候就会识别指令，将属性值绑定到Vue实例的模型上。
然后可以通过模型动态操纵属性，实现DOM的联动更新。
例如：
div id=应用程序
img v-bind:src= src :title= title
/div
脚本
新Vue({
埃尔： #app ，
数据：{
Src:./images/8.png.jpeg ，//修改模型后，视图也随之改变。
书名：《蝴蝶》
}
})
/脚本
双向绑定
Vue框架的核心功能是双向数据绑定。
双向绑定:当您将模型绑定到视图时，您也将视图绑定到模型，以便您可以通过更新视图来自动更新视图或模型的数据。
元素——形成能够双向绑定数据元素(input、textarea、select等)，由v-model指令绑定。
复制方式：相当于浅拷贝
例如：
div id=应用程序
h2{{message}}/h2
输入类型=text v-model=message
/div
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
消息：“数据双向绑定”
}
})
/脚本
模型影响视图：数据消息改变，div中的内容改变；视图模型：当输入输入框的内容发生变化时，数据中的消息发生变化，h2中的内容也发生变化。
值绑定
V-Model用于在视图和模型之间同步数据。
但有时需要控制同步发生的时机，或者需要将数据转换为Number类型——在数据同步到模型之前，将对应的修饰指令添加到v-model指令所在的表单控件中。
修饰符：。惰性(惰性加载)修饰符
div id=应用程序
input type= text v-model . lazy= msg
p{{msg}}/p
/div
脚本
新Vue({
埃尔： #app ，
数据：{
消息：“延迟加载”
}
})
/脚本。数字修饰符。修剪修饰因子例如：
div id=应用程序
输入类型=text v-model.number=num
pnum的类型：{{typeof(num)}}/p
！-输入类型=text v-model.trim=val -
！- pval的长度为：{{{ val.length }}/p -
/div
脚本
新Vue({
埃尔： #app ，
数据：{
数量：“”
}
})
/脚本
事件绑定
事件由v-on指令绑定。
事件处理器
(1)方法处理器:您可以使用v-on指令来监听DOM事件。(直接绑定到一个方法)
(2)内联语句处理器:除了直接绑定到方法，还可以使用内联JavaScript语句。
div id=example
按钮v-on:click= say( hi ) say hi/button//内联语句处理程序
按钮v-on:点击=说(什么)说什么/按钮
！-a href= https://www . Baidu . com v-on:click= say( hello ，$event)
转到Baidu/a-//内联语句处理器访问本机DOM事件。
/div
脚本
新Vue({
el: #example ，
方法：{
跟大家讲：函数(消息){
警报(消息)
}
//say: function (msg，event) {
//event.preventDefault()
//}
}
})
/脚本
注意：不带括号的函数名；括号里的其实是一个JS语句，叫做inline processor。
事件修饰符
。停止-防止冒泡。阻止-阻止默认事件。capture——使用捕获模式添加事件侦听器。self- only侦听触发此元素的事件。一次性触发一次例如：
a v-on:click.stop=doThis/a
div v-on:click.capture=doThis ./div
键值修饰符
。输入-输入事件。左-左键事件。右键事件。中中轮事件例如：
输入v-on:keyup.enter=submit ！-缩写语法-input @ keyup . enter= submit input v-on:keyup . enter= submit
！-缩写语法-
input @keyup.enter=提交
class与style绑定
绑定class
您可以将一个对象或数组传递给v-bind: class，并通过v-on绑定事件更改样式。
div id= example v-bind:class= color name v-on:click= change color
div id= example v-bind:class=[class 1，class 2] v-on:click= change color /div
绑定内联样式
将一个对象或数组传递给v-bind:style。
div-bind:style= { color:font color，fontsize: my size} 柚子
数据：{
fontColor:白色，
我的大小：“30px”
}
Div-bind: style= [base styles，vue styles] Xi 邮电大学/div
数据：{
baseStyles:{ color: red}，
vueStyles: { font-size:35px}
}
filter过滤器
1.在Vue.js中，筛选主要用于:
文本格式日期格式数组数据筛选2，使用的位置:
(1)插值表达式：({表达式过滤器})
{{邮件过滤器}}
(2)v-bind:属性过滤器
div v-bind:id= rawId formatId /div
3.用法：管道符号()
4.精华：本质是一个函数
5.分类：
(1)全局过滤器
Vue.filter(过滤器名称，函数(){
实现过滤功能
})
Vue.filter(filterA ，函数(值){
返回值“Hello”
})
新Vue({})
(2)局部过滤器:由Vue实例中的过滤器选项定义
新Vue({
埃尔： #id ，
//过滤器{
//过滤器名称：函数(参数){
//过滤功能
//}
//}
Filters:{ //Local filters，只能在当前vue实例绑定的div中使用。
filterA:函数(值){
返回值“Hello”
}
}
})
(3)过滤器的串联
{{邮件过滤器A 过滤器B }}
消息作为参数——过滤函数过滤器——过滤器过滤器b
或者：
{{ message filterA(arg1 ，arg2) }}
FilterA被定义为接收三个参数的过滤函数。message的值是第一个参数，“arg1”是第二个参数，arg2的值是第三个参数。
例如：
div id=应用程序
p { { 2022“ filterA filterB } }/p
/div
脚本
新Vue({
埃尔： #app ，
过滤器：{
filterA:函数(值){
返回值“是”
},
filterB:函数(值){
返回值“来了！”
}
}
})
/脚本
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。