Vue例項—— 計算屬性（computed）、 watch 狀態監聽和filter 過濾器
阿新 • • 發佈：2022-03-30
Vue例項—— 計算屬性（computed）、 watch 狀態監聽和filter 過濾器
Vue例項配置物件
| 選項 | 說明 |
|---|---|
| data | Vue例項資料物件 |
| methods | 定義Vue例項中的方法 |
| components | 定義子元件 |
| computed | 計算屬性 |
| filters | 過濾器 |
計算屬性（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>