vue中的按钮绑定事件小案例
作者：战斗中的老段
这篇文章主要介绍了vue中的按钮绑定事件小案例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue按钮绑定事件
效果图
第一步：写一个大盒子
第二步：写一个div；里边绑定一个class样式
第三步：写位置样式
第四步：data给绑定class设置一个初始值
第五步：写按钮
第六步：给样式设置一个初始值
第七步：绑定点击事件并判断样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: aquamarine;
}
/* 第二步写4个样式 */
.d1 {
/* translate根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
transform: translate(0, 0);
}
.d2 {
/* translate根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
transform: translate(200px, 0);
}
.d3 {
/* translate根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
transform: translate(200px, 200px);
}
.d4 {
/* translate根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
transform: translate(0, 200px);
}
</style>
</head>
<body>
<div id="app">
<!-- 第一步： 在容器里边写一个盒子；绑定一个样式 -->
<div id="box" :class="postionClass">
</div>
<!-- 第四步：写一个点击事件 -->
<button @click="toggle">点击切换</button>
</div>
<script>
var app = new Vue({
el: "#app",
// 第三步 ： 样式设置默认值
data: {
postionClass: 'd1',
// 第六步设定index初始值为1；从d1 d2 d3 d4后边这个1
index: 1
},
methods: {
// 第五步：绑定点击事件
toggle() {
// 第八步： 判断index不能大于4，返回1；否则的话返回的是index+1
this.index = this.index + 1 > 4 ? 1 : this.index + 1;
// 第七步：点击
this.postionClass = 'd' + this.index
}
}
})
</script>
</body>
</html>
用computed优化一下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: aquamarine;
}
/* 第二步写4个样式 */
.d1 {
/* translate根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
transform: translate(0, 0);
}
.d2 {
/* translate根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
transform: translate(200px, 0);
}
.d3 {
/* translate根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
transform: translate(200px, 200px);
}
.d4 {
/* translate根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 */
transform: translate(0, 200px);
}
</style>
</head>
<body>
<div id="app">
<!-- 第一步： 在容器里边写一个盒子；绑定一个样式 -->
<div id="box" :class="postionClass">
</div>
<!-- 第四步：写一个点击事件 -->
<button @click="toggle">点击切换</button>
</div>
<script>
var app = new Vue({
el: "#app",
// 第三步 ： 样式设置默认值
data: {
// postionClass: 'd1',
// 第六步设定index初始值为1；从d1 d2 d3 d4后边这个1
index: 1
},
computed: {
postionClass(){
return 'd' + this.index
}
},
methods: {
// 第五步：绑定点击事件
toggle() {
// 第八步： 判断index不能大于4，返回1 (d1)；否则的话返回的是index+1
this.index = this.index + 1 > 4 ? 1 : this.index + 1;
// 第七步：点击
// this.postionClass = 'd' + this.index
}
}
})
</script>
</body>
</html>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。