代码:
<div id="shoppingCart">
<ul>
<li>{{ name }} --- {{ price }} --- {{ count }}</li>
</ul>
</div>
<button onclick="reduceOne()">减少</button>
<script>
function reduceOne() {
Vue.set(cartData, 'count', cartData.count-1);
}
var cartData={
name:"T-shirt",
price:"$26.80",
count:20
};
var cart=new Vue({
el:"#shoppingCart",
data:cartData
});
</script>

本文介绍了一个使用Vue.js实现的简单购物车应用案例。通过HTML和JavaScript代码展示了如何动态显示商品名称、价格及数量,并提供了减少商品数量的功能。具体实现了当点击减少按钮时,能够实时更新商品的数量。

被折叠的 条评论
为什么被折叠?



