感谢您的支持,我会继续努力的!
打开微信扫一扫,即可进行扫码打赏哦
点我查看本站打赏源码!
Powered by RUNCODEX.COM,学的不仅是技术,更是梦想!!!
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="books">
<table>
<tr>
<th>序列号</th>
<th>书名</th>
<th>价格</th>
<th>数量</th>
<th>操作</th>
</tr>
<tr v-for="book in Books">
<td>{{ book.id }}</td>
<td>{{ book.book_name }}</td>
<td>{{ book.price }}</td>
<td>
<button v-on:click="book.count-=1">-</button>
{{ book.count }}
<button v-on:click="book.count+=1">+</button>
</td>
<td><button v-on:click="book.count=0">移除</button></td>
</table>
<p>总价:{{ totalPrice() }} <button v-on:click="clear()">移除所有</button> <button v-on:click="all_add_1()">所有+1</button></p>
</div>
xxxxxxxxxx
var vm = new Vue({
el : "#books",
data:{
Books:[
{
id:1,
book_name:"瓦尔登湖",
price:59,
count:1
},
id:2,
book_name:"平凡的世界",
price:74,
id:3,
book_name:"红岩",
price:23,
id:4,
book_name:"围城",
price:25,
}
]
methods:{
totalPrice:function(){
var total_price = 0;
for (var i = 0;i<this.Books.length;i ++){
total_price += this.Books[i].price*this.Books[i].count;
return total_price
clear:function(){
for (var i = 0;i < this.Books.length;i++){
this.Books[i].count = 0;
all_add_1:function(){
this.Books[i].count += 1
})
table {
border: 1px solid black;
width: 100%;
th {
height: 50px;
th, td {
border-bottom: 1px solid #ddd;