Vue实例配置对象
计算属性(computed)
格式：computed:{ 变量(){ 计算表达式} }
<p>总价格为：{{sum}}</p> var app=new Vue({ el:"#app", data:{ price:10, num:0 }, //按钮事件自增，自减事件 menthods:{ add:function(){ this.num++; }, end:function(){ this.num--; }, }, computed:{ sum(){ return this.price*this.num } } })
watch 状态监听(用来监听事件的变化)
注意：监听名要与被监听名相同，监听上一个数据，和新的数据。(应用场景：数据发生改变需要保存新数据或者需要查看以前的数据)
<!-- --> <body> <div id="app"> <input type="text" v-model="name"><br> <input type="text" v-model="home"> </div> <script> var app = new Vue({ el: "#app", data: { name: "上海", home:"北京" }, watch: { name(newvalue, oldvaule) { console.log("新城市：" + newvalue) //新的值 console.log("旧的城市：" + oldvaule) //旧的值 }, home(newvalue,oldvaule){ console.log("新家：" + newvalue) //新的值 console.log("旧家：" + oldvaule) //旧的值 } }, }); </script> </body>
watch: { //简写 name(newvalue, oldvaule) { console.log("新城市：" + newvalue) //新的值 console.log("旧的城市：" + oldvaule) //旧的值 }, //全写 name:{ immediate:true, //是否初始化时执行 handler(newvalue,oldvalue){ console.log("新城市：" + newvalue) //新的值 console.log("旧的城市：" + oldvaule) //旧的值 } } }
filter 过滤器
filter 过滤器，(对数进行格式化，比如字符串首字母大写，日期格式化等据)在页面中直接操作数据，返回最终结果。
<body> <div id="app"> {{mis | bag}} </div> <script> var app = new Vue({ el: "#app", data: { mis: "hello world", //小写转大写 }, filters:{ bag(value){ return value?value.toUpperCase():"" } } }); </script> </body>
