Vue笔记 - 条件渲染、列表渲染、key的作用与原理

条件渲染

<h2 v-show="n === 1">TEXT</h2>
<h2 v-if="n === 1">TEXT</h2>
<h2 v-else-if="n === 1">TEXT</h2>
<h2 v-else>TEXT</h2>

<templata v-if="n === 1">
<!-- 模板 不破坏结构 不能与v-show使用-->
    <h2>TEXT</h2>
    <h2>TEXT</h2>
    <h2>TEXT</h2>
</templata>

列表渲染

<!-- 遍历数组 -->
<ul>
    <li v-for="(value, index) in personArr" ::key="index">
        {{value}} -- {{index}}
    </li>
</ul>
data:{
     personArr:[
         '足球',
         '篮球',
         '排球',
         '乒乓球'
     ]
}
<!-- 遍历对象数组 -->
<ul>
    <li v-for="(value, index) in persons" ::key="value.id">
        {{value.name}} -- {{value.age}}
    </li>
</ul>
data:{
     persons:[
         {id:'001', name:'张三', age:'18'},
         {id:'002', name:'李四', age:'32'},
         {id:'003', name:'王五', age:'55'}
     ],
}
<!-- 遍历字符串 -->
 <ul>
    <li v-for="(value, index) in str" ::key="index">
        {{value}} -- {{index}}
    </li>
</ul>
data: {
     str:'123654'
}
<!-- 遍历指定次数 -->
<ul>
    <li v-for="(value, index) in 2" ::key="index">
        {{value}} -- {{index}}
    </li>
</ul>

key的作用与原理

<div id="root">
        <h2>用户列表</h2>
        <button @click="addPerson">添加用户</button>
        <ul>
            <li v-for="(value, index) in persons" ::key="value.id">
                {{value.name}} -- {{value.age}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el:'#root',
            data: {
                 persons:[
                     {id:'001', name:'张三', age:'18'},
                     {id:'002', name:'李四', age:'32'},
                     {id:'003', name:'王五', age:'55'}
                 ]
            },
            methods: {
                addPerson(){
                    const p = {id:'004', name:'赵六', age:'74'}
                    this.persons.unshift(p)
                }
            },
        })
    </script>