条件判断与列表渲染（v-if、v-show、v-for）

条件判断（v-if、v-show）

Vue.js提供了多个指令实现条件判断：v-if、v-else、v-else-if、v-show

v-if指令

• 如果表达式的值为true就输出DOM元素和包含的子元素，否则就不输出
• v-if属于指令，指令必须添加到一个元素上，根据表达式的结果判断是否输出元素。
• 格式：<p v-if="表达式">内容</p>，简单示例如下：

<div id="box">
    <p>a的值是：{{a}}</p>
    <p>b的值是: {{b}}</p>
    <p v-if="a<b">a大于b</p>
    <p v-else>a小于b</p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            a : 8,
            b : 4,
        }
    });
</script>

模板<template>元素中使用v-if

如果需要对一组元素进行判断，需要使用<template>将多个元素包含起来，并在template上使用v-if，示例如下：

<div id="box">
    <template v-if="show">
        <input type="radio" value="A">A
        <input type="radio" value="B">B
        <input type="radio" value="C">C
        <input type="radio" value="D">D
    </template>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            show: false
        }
    });
</script>

v-else指令

v-else配合v-if使用，下例判断是否闰年并弹框:

<div id="box">
    <p v-if="(year%4==0&&year%100!=0) || year%400==0">
        {{show(29)}}
    </p>
    <p v-else>
        {{show(28)}}
    </p>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            year: 2021,
        },
        methods: {
            show: function (value) {
                alert(this.year + '年2月有' + value + '天')
            }
        }
    });
</script>

v-else-if指令

和前面的if和else用法类似

注：v-else和v-else-if必须和v-if配套使用，紧跟在v-if后

v-show指令

• v-show根据表达式的值来判断是否显示和隐藏DOM元素（表达式为true元素显示，为false元素隐藏）
• 与v-if的区别：使用v-show指令的元素无论表达式的值为true还是false，该元素始终会被渲染并保留在DOM中。绑定值的改变只是简单切换元素的CSS属性display
• v-show不支持元素，也不支持v-else指令

<div id="box">
    <input type="button" :value="bText" v-on:click="toggle">
    <div v-show="show">
        <img src="../img/img_demo003.png">
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            show: true,
            bText: '隐藏图片',
        },
        methods: {
            toggle: function () {
                if (this.bText == '隐藏图片') {
                    this.bText = '显示图片'
                } else
                    this.bText = '隐藏图片'
                this.show = !this.show
            }
        }
    });
</script>

重点：v-if和v-show比较

	v-if	v-show
切换角度考虑	有一个局部编译/卸载的过程	仅发生样式的变化
初始渲染的角度考虑	是惰性的，在初始条件为false时，v-if什么都不会做	不管初始条件真假，DOM元素总是会被渲染

由上表可知：
从切换角度考虑：v-if消耗的性能比v-show大
从初始渲染考虑：v-show消耗的性能比v-if小
因此：
如果需要频繁地切换，使用v-show较好。
如果运行时条件很少改变，使用v-if较好

列表渲染

Vue的列表渲染功能，即将数组或对象中的数据循环渲染到DOM中。使用v-for指令，效果类似于遍历

items:{}	items:[]
数组	对象（类似字典）

重点：v-for遍历数组

• 根据接收数组中数据重复渲染DOM元素，格式如下，items是数组名称：
  <li v-for="item in items">{{item.name}}</li>
  简单示例如下：

  <div id="box">
      <ul>
          <li v-for="item in items">{{item.name}}</li>
      </ul>
  </div>
  <script type="text/javascript">
      var vm = new Vue({
          el : '#box',
          data : {
              items : [
                  {name : '张三'},
                  {name : '李四'},
                  {name : '王五'},
              ]
          },
      });
  </script>

• 可指定一个参数作为当前数组元素的索引，格式如下(item在前,index在后)：
  <li v-for="(item,index) in items">{{index}} {{item.name}}</li>

数组的增删改查

方法名	说明
push()	数组末尾添加一个或多个元素
pop()	移除数组最后一个元素
shift()	移除数组第一个元素
unshift()	数组开头添加一个或多个元素
splice()	添加或删除数组中元素
sort()	对数组元素排序
reverse()	颠倒数组元素顺序

举例一个格式：
vm.items.push({name : '赵六'})
vm为Vue实例名称，items为数组名称

v-for遍历对象（字典）

与遍历数组类似v-for="(value,key,index) in object"

• value是对象的值
• key是对象的键
• index是对象的索引
  注意value是第一个参数，key才是第二个参数，后两个参数是可选的，示例如下：

<div id="box">
    <ul>
        <li v-for="(value,key) in items">{{key}}-{{value}}</li>
    </ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            items : {
                name : '张三',
                sex : '男',
                age : '19',
            }
        }
    });
</script>

插入属性（键值对）到对象

格式：

• 全局方法：Vue.set(Vue实例名.object,'key','value')(在Vue实例后使用）
• 实例方法：vm.$set(Vue实例名.object,'key','value')

全局方法示例如下：

<div id="box">
    <ul>
        <li v-for="(value,key,index) in items">{{index}}-{{key}}-{{value}}</li>
    </ul>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : '#box',
        data : {
            items : {
                name : '张三',
                sex : '男',
                age : '19',
            }
        }
    });
    Vue.set(vm.items,'interest','swimming')
</script>

实例方法：将Vue.set改为vm.$set即可

如果想要一次性添加多个属性（多个键值对）,格式如下：
Vue实例名.字典名 = Object.assign({},Vue实例名.字典名,{键:'值',键:'值'});
示例如下：

vm.items = Object.assign({},vm.items,{
    interest : 'swimming',
    address : '海南',
});

v-for遍历整数

接收的整数即为循环次数，会将模板重复显示，下面使用v-for打印99乘法表：

<div id="box">
    <div v-for="m in 9">
        <span v-for="n in m">
            {{n}}*{{m}}={{m*n}}
        </span>
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#box'
    });
</script>