<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="example">
<ul>
<li v-for="item in books">
书名:{{item.name}}
数量:{{item.amount}}
<button @click="increment(item.amount)">+</button>
</li>
</ul>
</div>
<script type="text/javascript" src="D:/web/js/vue/vue.js"></script>
<script>
var app=new Vue({
el: "#example",
data: {
books: [
{
name: 'js',
amount: 1
},
{
name: 'js',
amount: 1
}
]
},
methods: {
increment(amount){
amount++
}
}
})
</script>
</body>
</html>
是因为,js函数是按值传递的?
你测试一下,在amount++执行完毕后,打印一下this.books看看有没有改变??
在button将传值改为<button @click="increment(item)">+</button>;
然后方法 改为 increment(item){tem.amount++},即可响应更新