vps网站设置,wordpress代码高亮插件,大型网站建设建站模板,营销单页网站模板一.属性计算、属性监听、属性过滤 1.认识MVVM V #xff08;用户视图界面#xff09;通过VM (应用程序) 向Model(数据模型) 取值与赋值的过程#xff01; 数据双向绑定 视图改变更新数据#xff0c;数据改变更新视图 2.属性计算 //在vue实例中通过computed去计算new …一.属性计算、属性监听、属性过滤 1.认识MVVM V 用户视图界面通过VM (应用程序)  向Model(数据模型)  取值与赋值的过程                           数据双向绑定   视图改变更新数据数据改变更新视图 2.属性计算 //在vue实例中通过computed去计算new Vue({//挂载容器el: #app,// 设置数据data: {firstName: ,// 姓lastName: ,//名num: 0},computed:{ //在这个对象中写方法这个方法名称就可以作为属性retrun的值就是计算的结果fullName(){return this.firstNamethis.lastName }} )} 2.属性监听 通过属性侦听观察数据的变化数据发生变化就执行相关的回调函数data、路由等数据发生改变就可以执行对应的回调往往用于处理一些异步的操作 用途根据城市名称查询天气信息根据歌曲id获取歌曲信息 new Vue({//挂载容器el: #app,data: {city: 广州,music_id: ,user: {age: 20}},watch:{city(nValue,oValue){console.log(数据变化) }})} 3.属性过滤 vue中的filter是输送介质管道不可缺少的一种装置意思就是把一些不必要的东西过滤掉 过滤器实质不改变原始数据只是对数据进行加工处理后返回过滤后的数据再进行调用处理我们也可以理解其为一个纯函数 //用法div classcontainer mt-3h3{{str}}/h3h3{{str | xxx}}/h3h3{{str | yyy}}/h3!-- 可以多次使用过滤器 先去除字母再转大写 --h3{{str | xxx |zzz}}/h3/divnew Vue({//挂载容器el: #app,data:{str:abc123edf456},// 过滤器 | 过滤不需要的字符filters:{xxx(value){// 去掉所有数字字符return value.replace(/\d/g,)},yyy(value){// 去掉所有大小写字母return value.replace(/[a-z]/ig,)},zzz(value){// 字母转大写return value.toUpperCase();}}}) // 计算属性//计算属性也可以通过filter进行过滤获取信息computed: {addjinXing() {let data this.arr.filter((item) item.done false);return data.length;},addwanCheng() {let data this.arr.filter((item) item.done true);return data.length;},},