表单的绑定
在前两节我们学过了将数据绑定到某一个标签的属性和将事件的监听绑定到某一个函数上。
这里我们同时使用 v-bind (简写为 : ）和 v-on (简写为 @ )，达到“双向”绑定的目的。
<template>
<div>
<input :value="text" @input="onInput" placeholder="Type here">
<p>{{ text }}</p>
</div>
</template>
<script>
methods: {
onInput(e) {
// a v-on handler receives the native DOM event
// as the argument.
this.text = e.target.value
}
}
</script>
运行代码，可以发现输入框下面的text可以显示输入的内容：
图片.png
这里Vue仍然提供了
v-model这个指令为了方便将数据和控件的model绑定
<div>
<input v-model="text" placeholder="Type here">
<p>{{ text }}</p>
</div>
图片.png
条件渲染
Vue也支持条件分支，v-if、v-else、v-else-if 会起到 if、else、 else if的作用。
<template>
<div>
<button @click="toggle">toggle</button>
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
</div>
</template>
<script>
export default {
data() {
return {
awesome: false
}
},
methods: {
toggle () {
this.awesome = !this.awesome
}
}
}
</script>
以上代码可以实现点击toggle按钮时，切换展示的h1 DOM。
图片.png
