常用指令列表
- v-model
- v-if
- v-else
- v-show
- v-for
- v-bind----簡(jiǎn)寫(xiě): :class="qq"、:type="text"
- v-on----簡(jiǎn)寫(xiě): @click="qq"
v-model 雙向綁定
<input type="text" v-model="message" />
<div> {{ message }} </div>
v-if 條件渲染宪睹，根據(jù)表達(dá)式的真假來(lái)刪除和插入元素
<div v-if="true">當(dāng)表達(dá)式為true愁茁，插入該條數(shù)據(jù)</div>
<div v-if="false">當(dāng)表達(dá)式為flase，刪除該條數(shù)據(jù)</div>
<div v-if="age > 25">當(dāng)表達(dá)式為true亭病，插入該條數(shù)據(jù)</div>
v-else 緊跟著v-if鹅很，添加一個(gè)else塊，否則將不會(huì)被識(shí)別
<div>
<p v-if="a>18">年齡：{{ data.age }}</p>
<p v-else>年齡：屬于未成年</p>
</div>
v-show 條件渲染罪帖，元素會(huì)始終渲染到HTML
<div v-show="true">當(dāng)表達(dá)式為true促煮，顯示該條數(shù)據(jù)</div>
<div v-show="false">當(dāng)表達(dá)式為false，隱藏該條數(shù)據(jù)</div>
<div v-show="a > 18">當(dāng)表達(dá)式為true整袁，顯示該條數(shù)據(jù)</div>
v-for指令基于一個(gè)數(shù)組渲染一個(gè)列表
<table>
<tr><td>姓名</td><td>年齡</td><td><性別/td></tr>
<tr v-for="persion in people">
<td>{{ persion.name }}</td>
<td>{{ persion.age }}</td>
<td>{{ persion.sex }}</td>
</tr>
</table>
v-bind指令菠齿，帶一個(gè)參數(shù)，參數(shù)通常是HTML元素的特性
<div v-bind:class="active"></div>
<div :class="active"></div>
v-on指令用于監(jiān)聽(tīng)DOM事件
<a v-on:click=""doSet></a>
<a @:click=""doSet></a>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
