條件渲染

• v-if：值true會被渲染祟滴，值false不會被渲染

<div id="app">
    <div v-if='isShow'>div div div</div>
    <button @click='isShow = !isShow'>改變</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: true
        }
    })
</script>

• v-else：與v-if結(jié)合使用形成對立面

<div id="app">
    <div v-if='isShow'>div div div</div>
    <div v-else='isShow'>DIV DIV DIV</div>
    <button @click='isShow = !isShow'>改變</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: true
        }
    })
</script>

• v-else-if：變量的多情況值判斷

<div id="app">
    <div v-if='tag == 0'>if if if</div>
    <div v-else-if='tag == 1'>else if else</div>
    <div v-else='tag == 2'>else else else</div>
    <input type='number' min='0' max='2' v-model='tag' />
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            tag: 0
        }
    })
</script>

• template：不被渲染的vue結(jié)構(gòu)標簽

<template v-if="isShow">
    <p>用template嵌套</p>
    <p>可以為多行文本</p>
    <p>同時顯隱</p>
    <p>且template標簽不會被vue渲染到頁面</p>
</template>

• v-show：一定會被渲染到頁面，以display屬性控制顯隱
• key：為v-if方式的顯隱創(chuàng)建緩存翠忠，提高效率

<div id="app">
    <div v-if='tag == 0' key='0'>if if if</div>
    <div v-else-if='tag == 1' key='1'>else if else</div>
    <div v-else='tag == 2' key='2'>else else else</div>
    <input type='number' min='0' max='2' v-model='tag' />
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            tag: 0
        }
    })
</script>

列表渲染

• v-for：循環(huán)渲染列表

<div id="app">
    <ul>
        <li v-for='item in items'>{{ item }}</li>
    </ul>
    <button @click='click'>改變</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            items: ['張三', '李四', '王五']
        }，
        methods: {
            click: function () {
                this.items.splice(1, 1, '李大大');
                this.items.pop();
                this.items.push('趙六')
            }
        }
    })
</script>

• 遍歷數(shù)組

// items: ['張三', '李四', '王五']

// 值
<ul>
    <li v-for='item in items'>{{ item }}</li>
</ul>
// 值, 索引
<ul>
    <li v-for='(item, index) in items'>{{ index }} - {{ item }}</li>
</ul>

• 遍歷對象

// {'name': '張三', 'age': 18, 'sex': '男'}

// 值
<div v-for="value in object">
  {{ value }}
</div>
// 值, 鍵
<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>
// 值, 鍵, 索引
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

• 復雜數(shù)據(jù)渲染

// items: [{'name': '張三'}, {'age': 18}, {'sex': '男'}]
<div>
    <div>{{ items[0].name }}</div>
    <div>{{ items[1].age }}</div>
    <div>{{ items[2].sex }}</div>
</div>