常用指令列表
- 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)系作者