前言：watch是個很實用的屬性。不但可以用來監聽form標籤值的變化，還可以用來監聽對象屬性的變化。
一、案例一
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<div id="content" >
<div>
是否已經全選
<span v-if="isAllCheck" style="color:red;">是</span>
<span v-else>否</span>
</div>
<div v-for="item in dataList">
<input type="checkbox" v-model="item.isCheck"/>{{item.name}}
<div>
</div>
<script>
new Vue({
el:'#content',
data: {
dataList:[
{isCheck:false, name:'選項一'},
{isCheck:false, name:'選項二'},
{isCheck:false, name:'選項三'},
],
},
computed:{
isAllCheck: function(){
const dataList = this.dataList;
for(var item of dataList){
//如果item中存在isCheck爲false的直接return false;
if(!item.isCheck) return false;
}
return true;
}
}
});
</script>
</body>
</html>
運行結果
二、案例二
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<style>
table { width:100%; }
td { text-align:center; }
input { width:50px; text-align:center; }
span { color:red; }
.total { margin-top:50px; text-align:center; }
</style>
</head>
<body>
<div id="content" >
<table>
<tr>
<th>商品</th>
<th>單價</th>
<th>數量</th>
<th>金額</th>
</tr>
<tr v-for="(item,index) in dataList">
<td>{{item.name}}</td>
<td>￥{{item.price}}</td>
<td>
<button @click="minus(index)">-</button>
<input type="text" v-model="item.num">
<button @click="add(index)">+</button>
</td>
<td>￥{{item.price*item.num}}</td>
</tr>
</table>
<div class="total">總金額爲<span>￥{{ totalPrice }}</span></div>
</div>
<script>
new Vue({
el:'#content',
data: {
dataList:[
{name:'商品一', price:10, num:0},
{name:'商品二', price:20, num:0},
{name:'商品三', price:30, num:0},
],
},
computed:{
totalPrice: function(){
let dataList = this.dataList,
totalPrice = 0;
for(let item of dataList){
if(item.num > 0){
totalPrice += item.price * item.num;
}
}
return totalPrice;
}
},
methods:{
add: function(index){
this.dataList[index].num++;
},
minus: function(index){
if(this.dataList[index].num>0){
this.dataList[index].num--;
}
}
}
});
</script>
</body>
</html>
運行結果
三、將案例一跟案例二合併
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<style>
table { width:100%; }
td { text-align:center; }
td:first-child,th:first-child { text-align:left; }
input { width:50px; text-align:center; }
span { color:red; }
.total { margin-top:50px; text-align:center; }
</style>
</head>
<body>
<div id="content" >
<table>
<tr>
<th><input type="checkbox" v-model="isAllCheck" @click="changeAllCheck">全選</th>
<th>商品</th>
<th>單價</th>
<th>數量</th>
<th>金額</th>
</tr>
<tr v-for="(item,index) in dataList">
<td><input type="checkbox" v-model="item.isCheck"></td>
<td>{{item.name}}</td>
<td>￥{{item.price}}</td>
<td>
<button @click="minus(index)">-</button>
<input type="text" v-model="item.num">
<button @click="add(index)">+</button>
</td>
<td>￥{{item.price*item.num}}</td>
</tr>
</table>
<div class="total">總金額爲<span>￥{{ totalPrice }}</span></div>
</div>
<script>
new Vue({
el:'#content',
data: {
dataList:[
{isCheck:false, name:'商品一', price:10, num:1},
{isCheck:false, name:'商品二', price:20, num:1},
{isCheck:false, name:'商品三', price:30, num:1},
],
},
computed:{
totalPrice: function(){
let dataList = this.dataList,
totalPrice = 0;
for(let item of dataList){
if(item.isCheck && item.num > 0){
totalPrice += item.price * item.num;
}
}
return totalPrice;
},
isAllCheck:function(){
let dataList = this.dataList;
for(let item of dataList){
if(!item.isCheck){ //如果isCheck存在false的，直接返回false
return false
}
}
return true;
}
},
methods:{
add: function(index){
this.dataList[index].num++;
},
minus: function(index){
if(this.dataList[index].num>0){
this.dataList[index].num--;
}
},
changeAllCheck: function(){
let dataList = this.dataList;
let bool = this.isAllCheck = !this.isAllCheck;
for(let item of dataList){
item.isCheck = bool;
}
}
}
});
</script>
</body>
</html>
運行結果
