Vue监听使用方法和过滤器实现
短信预约 -IT技能 免费直播动态提醒
前言
- 今天是自学VUE整理知识点的第四天呢，今天整理一下过滤器，watch监听的知识点
过滤器
- 过滤器的作用:为页面中数据进行添油加醋
- 有两种: 局部过滤器 全局过滤器
- 格式：
- 1.声明过滤器
- 2.{{数据|过滤器的名字}}
局部过滤器代码
局部⾃定义过滤器：关键用到的是使⽤filters属性，第⼀种和第⼆种声明⽅式都可以去实现。
Vue.component('myLi',{
template:`
`
});
var App={
data(){
return{
price:0,
msg:'hello filter'
}
},
template:`
<div>
<input type='number' v-model='price' />
<h3>{{price | myCurrentcy}}</h3>
<h4>{{msg |myReverse }}</h4>
</div>
`,
filters:{
// 声明过滤器
myCurrentcy:function(value){
return "￥"+value
}
}
};
new Vue({
el:'#app',
components:{
App,
},
template:`<App/>`
}) 全局过滤器
优点：在项目中经常使用过滤器对数据进行格式化后显示在页面上，比如日期格式转化，数值转换成状态文字等过滤器，如果在每个.vue页面都复制同一个过滤器进行使用，虽然是没问题，但是如果过滤器方法中，需要追加新的情况判断或出现Bug时就要将每个.vue内的过滤器进行修改，既费时又费力，所以为了项目维护，可以优先考虑定义全局过滤器
全局过滤器代码:
Vue.filter('myReverse',function(value){
return value.split('').reverse().join('');
});`watch监听
vue提供了侦听属性watch，可以很好的观察和侦听vue实例响应数据的变化。
基本的数据类型：
- 基本的数据类型 简单监听
- 复杂的数据类型 深度监听
简单监听
通过watch方法：方法里有(新值，旧值)用来监听 也可添加条件，当新值等于一个值时，输出其他值。*
<input type="text" v-model="msg">
<h3>{{msg}}</h3>
new Vue({
el:'#app',
data(){
return{
msg:'',
stus:[{name:'jack'}]
}
},
watch:{
msg:function(newV,oldV){
console.log(newV,oldV);
if(newV ==='sir'){
console.log('sir来了')
}
} 复杂监听
对于复杂的监听事件 使用stus进行深度监听*
<button @click="stus[0].name='rose'">改变 </button>
<h4>{{stus[0].name}}</h4>
new Vue({
el:'#app',
data(){
return{
msg:'',
stus:[{name:'jack'}]
}
},
// 监听复杂数据类型 object array 深度监听
stus:{
deep:true,//深度监听
handler:function(newV,oldV){
console.log(newV[0].name);
}
}
} 到此这篇关于Vue监听使用方法和过滤器实现的文章就介绍到这了,更多相关Vue监听内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
