Vue.js（七）条件渲染、列表渲染、set方法

官方文档：
条件渲染： https://cn.vuejs.org/v2/guide/conditional.html
列表渲染： https://cn.vuejs.org/v2/guide/list.html

---

一、条件渲染

1、v-if

<div id="root">
    <div v-if="show">{{message}}</div>
</div>

<script>
    var vm = new Vue({
        el: "#root",
        data: {
            show: false,
            message: "Hello World"
        }

    })
</script>

v-else与v-if紧贴使用，所在标签（兄弟）没有被其他标签分开。

<div v-if="show">{{message}}</div>
<div v-else>Bye World</div>

多条件，v-else-if，同理所在标签（兄弟）没有被其他标签分开。

<div v-if="show === 'a'">This is A</div>
<div v-else-if="show === 'b'">This is B</div>
<div v-else>This is others</div>

2、v-show

v-show是块被影藏了。

<div id="root">
    <div v-if="show">{{message}}</div>
    <div v-show="show">{{message}}</div>
</div>

<script>
    var vm = new Vue({
        el: "#root",
        data: {
            show: false,
            message: "Hello World"
        }

    })
</script>

3、用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。

<div id="root">
    <div v-if="show">
        用户名：<input />
    </div>
    <div v-else>
        邮箱名：<input />
    </div>
</div>

<script>
    var vm = new Vue({
        el: "#root",
        data: {
            show: true,
            message: "Hello World"
        }

    })
</script>

那么在上面的代码中切换 show 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素， 不会被替换掉——仅仅是替换了用户名和邮箱名位置。

Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”，只需添加一个具有唯一值的 key 属性即可。

<div id="root">
    <div v-if="show">
        用户名：<input key="username"/>
    </div>
    <div v-else>
        邮箱名：<input key="password"/>
    </div>
</div>

<script>
    var vm = new Vue({
        el: "#root",
        data: {
            show: true,
            message: "Hello World"
        }

    })
</script>

现在，每次切换时，输入框都将被重新渲染。

二、列表渲染

1、v-for

<div id="root">
   <div v-for="item of list">{{item}}</div>
</div>

<script>
    var vm = new Vue({
        el: "#root",
        data: {
            list: [
                "hello",
                "one",
                "fine",
            ]
        }

    })
</script>

打印下标：

<div id="root">
   <div v-for="(item, index) of list">
       {{item}} --- {{index}}
   </div>
</div>

更进一步使用：

<div id="root">
   <div v-for="(item, index) of list" :key="item.id">
       {{item.text}} --- {{index}}
   </div>
</div>

<script>
    var vm = new Vue({
        el: "#root",
        data: {
            list: [{
                id: "1001",
                text: "hello"
            }, {
                id: "1002",
                text: "one"
            }, {
                id: "1003",
                text: "fine"
            }]
        }

    })
</script>

关于key：
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

因为它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key 还具有其他用途，我们将在后面的指南中看到其他用途。

不要使用对象或数组之类的非原始类型值作为 v-for 的 key。用字符串或数类型的值取而代之。

如上的key是后台返回时数据库中唯一的key（主键），就可以用作key。

给列表添加元素：

再看下面：

vue提供的七个操作数组的方法：pop、push、shift（删除数组第一项）、unshift（数组左加入）、splice（对数据进行截取）、sort（对数组进行排序）、reverse（对数组进行取反）

---

从数组下标为1开始删除一项，然后接着添加一项数据——间接达到数组修改效果：

直接修改list的引用：

2、template使用

<div id="root">
   <div v-for="(item, index) of list" :key="item.id">
       <div>
           {{item.text}} --- {{index}}
       </div>
       <span>
           {{item.text}}
       </span>
   </div>
</div>

不出现外层div？使用template：

<div id="root">
   <template v-for="(item, index) of list" :key="item.id">
       <div>
           {{item.text}} --- {{index}}
       </div>
       <span>
           {{item.text}}
       </span>
   </template>
</div>

3、对象的循环

<div id="root">
    <div v-for="item of userInfo">
        {{item}}
    </div>
</div>

<script>
    var vm = new Vue({
        el: "#root",
        data: {
            userInfo: {
                name: 'onefine',
                age: '18'
            }
        }

    })
</script>

<div id="root">
    <div v-for="(item, key) of userInfo">
        {{item}} --- {{key}}
    </div>
</div>

<div id="root">
    <div v-for="(item, key, index) of userInfo">
        {{item}} --- {{key}} --- {{index}}
    </div>
</div>

修改数据：

更改对象的引用：

4、set方法

Vue全局方法：

实例方法：

数组上的set方法：

<div id="root">
    <div v-for="(item, index) of userInfo">
        {{item}} --- {{index}}
    </div>
</div>

<script>
    var vm = new Vue({
        el: "#root",
        data: {
            userInfo: [1, 2, 3, 4]
        }
    })
</script>