vue——点击一次add按钮,则值+1
效果:①对输入框的值,点击一次add按钮,则值+1;②如果不能加,则像正常表达式加错了那样返回结果,例如NaN;③data里的message的值,是初始值(可以是数字1或者字符串‘1’);④methods里是函数集合,他们之间用逗号分隔;⑤获取值的时候,要加上this,例如this.message获取的是message的值。<!DOCTYPE html>&l..
·
效果:
①对输入框的值,点击一次add按钮,则值+1;
②如果不能加,则像正常表达式加错了那样返回结果,例如NaN;
③data里的message的值,是初始值(可以是数字1或者字符串‘1’);
④methods里是函数集合,他们之间用逗号分隔;
⑤获取值的时候,要加上this,例如this.message获取的是message的值。
<!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">
<title>Title</title>
<link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--这里不可以使用form表单,提交会自动刷新,造成不会自动累加-->
<div class="form-inline">
<button type="submit" class="btn btn-default" @click="add">+</button>
<div class="form-group">
<input type="text" class="form-control" v-model="message">
</div>
<button type="submit" class="btn btn-default" @click="minus">-</button>
<button type="submit" class="btn btn-default" @click="reset">0</button>
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
message:1
},
methods:{
add:function () {
this.message++
},
minus:function () {
this.message--
},
reset:function () {
this.message=0
}
}
});
</script>
</body>
</html>
更多推荐
已为社区贡献4条内容
所有评论(0)