<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<style>
[v-clock]{
display:none;
}
</style>
<body>
<div id="app" v-cloak>
<table>
<tr>
<th>1</th>
<th><input type="checkbox" v-model="checkall"></th>
<th>商品名稱</th>
<th>單價</th>
<th>數量</th>
<th>操作</th>
</tr>
<tr v-for="(product, index) in products">
<td>{{index + 1}}</td>
<td><input type="checkbox" v-model="toggle" :value="parseInt(index)"></td>
<td>{{product.title}}</td>
<td>{{product.id}}</td>
<td>
<button @click="reduce(index)">-</button>
{{product.userId}}
<button @click="add(index)">+</button>
</td>
<td><button @click="rowremove(index)">刪除</button></td>
</tr>
</table>
<div>{{total}}</div>
</div>
<script>
let app = new Vue({
el:"#app",
data:{
products:[],
product:{
title:'',
userId:0,
id:0,
},
toggle:[],
checkall:false
},
created(){
console.log('1');
let vm = this;
$.ajax({
type:'get',
url:'https://jsonplaceholder.typicode.com/albums',
success:function(b){
vm.products=b;
}
})
},
watch:{ //想在某值改變時，執行動作，就用watch。錯誤案例：v-model在綁click，他似乎存在先执行click后操作v-model的优先级。實際上一般使用v-model绑定之后就不要自己去处理click了，可以用vue的watch。
checkall:function(){
if(this.checkall==true){
this.toggle=[];
for(let i=0;i<this.products.length;i++){
this.toggle.push(i);
}
}else{
this.toggle=[];
}
}
},
methods:{
reduce:function(i){
if(this.products[i].userId === 1 ) return;
this.products[i].userId--;
},
add:function(i){
this.products[i].userId++;
},
rowremove:function(i){
this.products.splice(i,1);
}
},
computed:{
total:function(){
var sum=0;
var vt=this.toggle;
for(let i=0;i<vt.length;i++){
sum += this.products[vt[i]].userId * this.products[vt[i]].id
}
return sum;
}
}
})
</script>
</body>
沒有留言:
張貼留言