要求:设定商品的价格和数量,自动得出商品总价。
methods 中的方法不哟啊使用箭头函数,否则绑定的是window;
EcmaScript 6为对象成员方法提供了一种简写的方式;
handleCountClick (){this.count++; }的写法等价与 handleCountClick : function(){},它没有任何特性,只是纯粹的简写了
其实加的那个button的按钮标签里可以直接写 v-on:click=“count++” ,效果一样。
代码如下 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<div>
<label for="">商品价格</label>
<input type="number" v-model="price"/>
</div>
<div>
<label for="">商品数量</label>
<button v-on:click="count = count - 1 < 0 ? 0 :count-1">-</button><span>{{count}}</span>
<button v-on:click="handleCountClick">+</button>
</div>
<div>
总价格: <strong>{{ price * count }}</strong>
</div>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
price:5,
count:2
},
methods:{
handleCountClick (){
this.count++;
}
}
});
</script>
</body>
</html>
显示效果如下: