脚本宝典收集整理的这篇文章主要介绍了1.计数器，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
计数器
设计两个按钮，分别添加点击事件，实现累加和递减。
v-on:click && @click 绑定事件
2.获取元素内容
<h1 v-text="text">
</h1>
<h1 v-html="text">
</h1>
<h1>{{text}}</h1>
此处实现计算器的数字通过模板获取
<!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">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
#app {
width: 150px;
height: 50px;
background-color: #00ffff38;
margin: auto;
margin-top: 60px;
display: flex;
}
button {
width: 50px;
height: 50px;
border: none;
background-color: #5f9ea09c;
cursor: pointer;
font-size: 20px;
}
span {
display: block;
width: 50px;
height: 50px;
background-color: aquamarine;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="app">
<button @click="jian">
-
</button>
<span>
{{num}}
</span>
<button @click="add">
+
</button>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
num: 1
},
methods: {
add: function () {
if (this.num < 10) {
this.num++;
} else {
alert("到顶了！");
}
},
jian: function () {
if (this.num > 0) {
this.num--;
} else {
alert("到低了！");
}
}
}
})
</script>
</html>
以上是脚本宝典为你收集整理的1.计数器全部内容，希望文章能够帮你解决1.计数器所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。