Vue實例的4個常用選項
1.過濾器 filters：在不改變的data的情況下輸出前端頁面需要的格式數據。例如將小數過濾為整數等。filters是一個對象，裏邊定義一個function方法，function傳入一個參數，function的作用是對數據進行相關處理。
<!DOCtype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- <script src="https://unpkg.com/vue"></script> -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
數字1 : {{num1 | filtersFunc}}<br/>
數字2 : {{num2 | filtersFunc}}<br/>
數字3 : {{num3 | filtersFunc}}<br/>
</div>
<script>
let vm = new Vue({
// 掛載元素
el:‘#app‘,
//實例vm的數據
data:{
num1:33.4,
num2:22.2,
num3:42.6
},
// 過濾器
filters:{
filtersFunc(value){
return parseInt(value);
}
}
});
</script>
</body>
</html>
運行結果為：
2. 計算屬性 computed：當數據需要經過處理計算後才能得到結果的，我們可以用這個屬性。例如求和等。computed是一個對象，裏邊定義一個function方法，function傳入一個參數，function的作用是對數據進行相關處理計算等。 計算屬性 computed 用法更簡潔。
<!DOCtype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- <script src="https://unpkg.com/vue"></script> -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
和:{{sum}}
</div>
<script>
let vm = new Vue({
// 掛載元素
el:‘#app‘,
//實例vm的數據
data:{
num1:33.4,
num2:22.2
},
// 計算屬性
computed:{
sum(){
return parseInt(this.num1 + this.num2);
}
}
});
</script>
</body>
</html>
運行結果為：
3.方法 methods：在 methods 中，我們可以定義一些方法供組件使用。例如給定一個數據num，實現點擊按鈕數據num+1，可以定義一個puls()方法在methods中，然後將puls()綁定在按鈕的點擊事件上；
<!DOCtype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- <script src="https://unpkg.com/vue"></script> -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{num}}
<button v-on:click="plus">加1</button>
</div>
<script>
let vm = new Vue({
// 掛載元素
el:‘#app‘,
//實例vm的數據
data:{
num:33//,//num2:22.2
},
// 方法
methods:{
plus(){
return this.num++;
}
}
});
</script>
</body>
</html>
運行結果：
點擊加1按鈕1次：
再點擊加1按鈕1次：
4.觀察 watch：watch是Vue提供的用於檢測指定的數據發生改變的api，類似於事件監聽。可以用methods中的例子來監聽數字num。
<!DOCtype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- <script src="https://unpkg.com/vue"></script> -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{num}}
<button v-on:click="plus">加1</button>
</div>
<script>
let vm = new Vue({
// 掛載元素
el:‘#app‘,
//實例vm的數據
data:{
num:33//,//num2:22.2
},
// 方法
methods:{
plus(){
return this.num++;
}
},
// 觀察
watch:{
num(){
console.log(‘發生變化‘);
console.log(this.num);
}
}
});
</script>
</body>
</html>
運行結果：
點擊加1按鈕1次：
再點擊加1按鈕1次：
Vue實例的4個常用選項