VUE条件渲染与列表渲染

条件渲染

• 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结合使用形成对立面

<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结构标签

<template v-if="isShow">
    <p>用template嵌套</p>
    <p>可以为多行文本</p>
    <p>同时显隐</p>
    <p>且template标签不会被vue渲染到页面</p>
</template>

• v-show：一定会被渲染到页面，以display属性控制显隐
• key：为v-if方式的显隐创建缓存，提高效率

<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：循环渲染列表

<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>

• 遍历数组

// 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>

• 复杂数据渲染

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