Vue基礎以內部指令（上）

v-if、v-else-if、v-else以及v-show

條件指令v-if、v-else-if、v-else

相似於JavaScript裏的if、else-if、else，這三個指令根據表達式的值對DOM/組件進行渲染/銷燬。

值得注意的是，v-else-if必須跟在v-if以後，v-else必須跟在v-else-if或者v-if以後。
若是想一次性判斷多個元素，能夠將他們包裹在template以內，使用條件指令操做外層的template，template並不會包含在最終的渲染結果中。

<div id="app">
  <template v-if="state">
    <p>文本A</p>
    <p>文本B</p>
    <p>文本C</p>
  </template>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app', // app是Vue實例的掛在對象
        data: {
            state: true
        }
    })
</script>

Vue在渲染元素時，出於效率考慮，會盡量的複用已有元素而非從新渲染。

<div id="app">
    <input type="text" v-if="state" placeholder="電話">
    <input type="text" v-else placeholder="郵箱">
    <button @click="toggle">切換</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app', // app是Vue實例的掛在對象
        data: {
            state: false
        },
        methods: {
          toggle () {
            this.state = !this.state
          }
        }
    })
</script>

點擊「toggle」按鈕，輸入框內的placeholder改變，但當輸入內容再進行切換後，內容依舊存在，說明被複用了，只是修改了placeholder。

要是不但願被複用，須要在指定的元素上添加key值，key值存在且惟一。

<div id="app">
    <input type="text" v-if="state" placeholder="電話" key="phone">
    <input type="text" v-else placeholder="郵箱" key="email">
    <button @click="toggle">切換</button>
</div>

v-show

面試考點：v-show和v-if實現的視覺效果徹底一致，可是仍是有本質區別的，v-show改變CSS display的值，v-if完全移除元素。
開發技巧：由於v-show是改變CSS屬性，不管表達式真假與否，都會被編譯。v-if直接操做DOM的移除/渲染，因此v-if更適合不常常變化的場景，v-show適合頻繁變化的場景。

列表循環指令v-for

表達式需結合in使用，相似v-for="item in items"

數組

<div id="app">
  <ul>
    <li v-for="(item, index) in items">{{index}}-{{item}}</li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app', // app是Vue實例的掛在對象
        data: {
          items: [
            '大盤雞',
            '周黑鴨',
            '糖醋里脊',
          ]
        }
    })
</script>

用v-for將items中的數據循環渲染，item至關於items元素的別名，同時還支持index做爲可選索引

對象

遍歷對象屬性時，有兩個可選參數，分別爲鍵名和索引

<div id="app">
  <ul>
    <li v-for="(value, key, index) in user">{{index}}-{{key}}:{{value}}</li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app', // app是Vue實例的掛在對象
        data: {
          user: {
            name: '一枚蛋Oops',
            age: 3,
            hobby: '漂亮妹子'
          }
        }
    })
</script>

整數

<span v-for="n in 5">{{ n }}</span>

輸出：12345

v-text和v-html

v-text

面試考點：v-text和{{}}功能同樣，展現文本，可是v-text比{{}}好的地方是，當網速很慢或者javascript出錯時，會暴露咱們的{{xxx}}，而v-text不會顯示出來。

<span v-text="message"></span>

v-html

面試考點：v-html和v-text區別在於v-text輸出的是純文本，瀏覽器不會對其再進行html解析，但v-html會將其當html標籤解析後輸出。

<span v-html="message"></span>
message: '<strong>Hello</strong> world',

Hello world
以上是本期所有內容，欲知後事如何，請聽下回分解<(￣︶￣)↗[GO!]