一个简单的按钮点击事件，用到v-on监听：
初始状态
代码：
<template>
<div>
<div class="bottom" >
<div class="startBox" v-on:click="counter+=1">
<text>按钮</text>
</div>
</div>
<div class="bottom" >
<div class="startBox" >
<text>点了{{counter}}下</text>
</div>
</div>
</div>
</template>
<script>
export default {
name: "index",
data: {
counter: 0,
},
}
</script>
每点一下按钮，下边的数字加1
另一种方式是通过函数，然后控制点击次数的增加：
代码：
<template>
<div>
<div class="bottom" >
<div class="startBox" v-on:click="times">
<text>按钮</text>
</div>
</div>
<div class="bottom" >
<div class="startBox" >
<text>点了{{counter}}下</text>
</div>
</div>
</div>
</template>
<script>
export default {
name: "index",
data: {
counter: 0,
},
methods: {
times:function (event) {
this.counter++
}
}
}
</script>
此处用到v-model 指令在表单控件元素上创建双向数据绑定。
令人感动的是：v-model 会根据控件类型自动选取正确的方法来更新元素。
蓝色代表输入框
image.png
代码：
<template>
<div>
<div class="bottom" >
<text>单行文本输入：</text>
<input class="start" placeholder="由此开始输入..." v-model="message1">
<text>你刚刚输入了:</text>
<text>{{message1}}</text>
</div>
<div class="bottom" >
<text>多行文本输入：</text>
<textarea class="start" placeholder="由此开始输入..." v-model="message2"></textarea>
<text>你刚刚输入了:</text>
<text>{{message2}}</text>
</div>
</div>
</template>
<script>
export default {
name: "index",
data: {
message1:'this is 1',
message2:'this is 2\nthis is 3',
},
}
</script>
当把里面内容都清空，则显示：
image.png
