Vue.2

v-model

实现数据双向绑定。

<!-- number1: 2 -->
<h1>&#123;&#123; number1 &#125;&#125;</h1>
<input v-model="number1"></input>

number1被定义为2，上面的<h1>标签内会显示2，下面的<input>标签内也会显示2。如果在<input>内输入新的内容，number1的值会改变，<h1>的内容也会改变。

v-on

绑定事件。

<!-- isShow = false
    clickbutton &#123;
    isShow = !isShow
    isShow ? sometext = "按钮打开了！" : sometext = "按钮关闭了！"
&#125; -->
<button v-on:click="clickbutton">按钮</button>
<h1>&#123;&#123; sometext &#125;&#125;</h1>

在上面的例子中，如果button被按下，就会触发click事件并执行方法clickbutton。在clickbutton中，会将isShow变为与它相反的真假值，这样就可以进行状态转化。三元操作符按照isShow的真假性执行表达式，如果isShow为真，sometext是“按钮打开了！”反之则是“按钮关闭了！”
也可以讲clickbutton的内容写到v-on里。

v-show

继续上一个例子。

<!-- isShow = false
    clickbutton &#123;
    isShow = !isShow
&#125;
也可以将下面一行改成<button v-on:click="isShow = !isShow">按钮</button> -->
<button v-on:click="clickbutton">开关</button>
<h1 v-show="isShow">开关打开了！</h1>
<h1 v-show="!isShow">开关关闭了！</h1>

按下<button>，会将isShow转化为与它相反的值。这一次使用v-show，它能按照指定的值的真假性显示元素。如果指定的值为true，v-show就会显示元素。v-show通过设置元素的可见性显示元素，而非删除和添加新的元素。v-show也可以传入表达式，比如上面的!isShow。