常用指令

v-model

<input type="text" v-model="username" />
双向绑定：{{username}}

v-if

<div v-if="os == 'windows'">windows系统</div>
<div v-else-if="os == 'linux'">linux系统</div>
<div v-else-if="os == 'mac'">苹果系统</div>
<div v-else>其他系统</div>

v-show

<div v-show="IsShow">根据IsShow这个变量来判断显示还是隐藏</div>

v-for

<table width="500px" border="1px">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr v-for="(item, index) in userlist" :key="index">
        <td>{{item.nickname}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.age}}</td>
    </tr>
</table>


数据结构
userlist:[
    {
        nickname:'张三',
        sex:'男',
        age:15
    },
    {
        nickname:'李四',
        sex:'女',
        age:17
    },
    {
        nickname:'王五',
        sex:'男',
        age:19
    }
],

v-html

{{output}}
<div v-html="output"></div>
<div v-text="output"></div>

数据结构
output:"<u>只是一个段落</u>"

v-pre

不需要编译直接输出

<span v-pre>{{this will not be compiled}}</span>

v-bind

绑定元素属性

<div v-bind:title="title">绑定元素属性</div>
<div :title="title">简写方式</div>

数据结构
title:'绑定元素属性'

v-on

绑定事件

<button v-on:click="ClickMe">绑定事件</button>
<button @click="ClickMe">绑定事件-简写方式</button>

方法结构：
ClickMe()
{
    alert('触发事件')
}