什么是vue指令：
- 比如Angular中的 ng-xxx欧芽。
- vue中以 v-xxx 開頭人們稱它為指令新蟆。
- 在vue中提供了一些對(duì)頁(yè)面 + 數(shù)據(jù)的更為方便的操作训柴，這些操作就是指令缸濒，類似于HTML中的屬性宝惰。
- 指令中封裝了一些Dom行為舔稀，結(jié)合屬性作為一個(gè)暗號(hào)，暗號(hào)有對(duì)應(yīng)的值掌测，根據(jù)不同的值内贮，框架會(huì)進(jìn)行相關(guān)的Dom操作的綁定行為。
vue常用的v-指令：
- v-text 元素的innerText屬性汞斧，必須是雙標(biāo)簽
- v-html 元素的innerHTML
- v-if 判斷是否插入這個(gè)數(shù)據(jù)夜郁，與之配套的是v-else-if 和 v-else 元素必須相鄰在一起才會(huì)生效，否則報(bào)錯(cuò)粘勒，v-if值如果是true就在當(dāng)前插入元素竞端，反之移除，v-if和v-else-if必須有值庙睡，v-else直接寫事富。
- v-else-if
- v-else
- v-show 隱藏元素技俐，原理是css中的 display:none boolean類型。
以下代碼是指令用法统台，在元素上使用雕擂，接收data函數(shù)return的數(shù)據(jù)。
//1.0
<template>
<div class="home">
<span v-text="text"></span>
<hr/>
<span v-html="html"></span>
<hr/>
<span v-if="ifs=== 1">1</span>
<span v-else-if="ifs=== 2">2</span>
<span v-else>3</span>
<hr/>
<span v-show="show">display block</span>
</div>
</template>
<script>
export default {
name: 'home1',
data(){
return{
text:'<h1>我是v-text</h1>',
html:'<h1>我是v-html</h1>',
ifs:1,
show:true
}
}
}
</script>
<style></style>
1.0代碼渲染結(jié)果
