用vue写购物车常用的数量增加和减少吧!
这个非常简单,我将步骤分开来弄,这样可以随时拿随时用。先上效果图,中间的是数量,首先,要先确定几点,1.data中定义数据,比如num2.methods中添加两个方法,比如add(增加)和sub(减少)3.使用v-text将num设置给span标签4.使用v-on将add和sub分别绑定给+,-按钮5.累加逻辑:是可以一直增加6递减逻辑:当小于0 时,让他等于0或者1展示未写效果的代码:<b
·
这个非常简单,我将步骤分开来弄,这样可以随时拿随时用。
先上效果图,
中间的是数量,
首先,要先确定几点,
1.data中定义数据,比如num
2.methods中添加两个方法,比如add(增加)和sub(减少)
3.使用v-text将num设置给span标签
4.使用v-on将add和sub分别绑定给+,-按钮
5.累加逻辑:是可以一直增加
6递减逻辑:当小于0 时,让他等于0或者1
展示未写效果的代码:
<body>
<div id="app">
<!-- 计数器 -->
<div class="input-num">
<button @click="add">+</button>
<span>{{num}}</span>
<button @click="sub">-</button>
</div>
</div>
</body>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 编码 -->
<script>
// 创建Vue实例
var app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
add: function() {
//console.log('add');
if(this.num>0 || this.num==1){
this.num++;
}
this.num++
},
sub: function() {
//console.log('sub');
if(this.num<0 || this.num==1){//当num小于0或者num等于1时让num的值等于1
alert('已经是最少的了')
}else{
this.num--;
}
}
}
});
</script>
根据上面的步骤写出大致要实现的效果就是这些了!
更多推荐
已为社区贡献2条内容
所有评论(0)