效果：
①对输入框的值，点击一次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>
3454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
