(6) vue 条件和列表渲染

一、条件渲染

1. v-if

通过表达式的真假来控制此标签是否显示

    <div id="vm">
        <!--awesome为真时显示此句-->
        <h1 v-if="awesome">Vue is awesome!</h1>
        <!--awesome为假时显示此句-->
        <h1 v-else>Oh no 😢</h1>
    </div>
    <script>
        var vm = new Vue({
            el: '#vm',
            data: {
                awesome:false
            }
        })
    </script>

2.v-else-if

 

    <div id="vm">
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#vm',
            data: {
                type:'D'
            }
        })
    </script>

 

3.在模板元素上使用v-if

 

4.key管理可复用元素

 

5.v-show

<h1 v-show="ok">Hello!</h1>

和v-if一样的效果，但v-show 只是简单地切换元素的 CSS 属性display.

 v-show不支持模板

 

 二、列表渲染

 1.v-for

    <div id="vm">
        <ul>
            <li v-for="item in items">
                {{ item.message }}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#vm',
            data: {
                items: [
                    { message: 'Tom' },
                    { message: 'Jan' }
                ]
            }
        })
    </script>

直接使用整数

    <div id="vm">
        <ul>
            <li v-for="n in 10">{{ n }}</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#vm'

        })
    </script>

 

 

2.可选参数

v-for 的第二个参数为可选参数，当前表示索引

    <div id="vm">
        <ul>
            <li v-for="(item,index) in items">
                {{ item.message}},{{index}}
            </li>
        </ul>
    </div>

 

 3.使用对象

其中第二个参数表示索引名称

    <div id="vm">
        <ul>
            <li v-for="(item,index) in Student">
                {{ item}},{{index}}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#vm',
            data: {
                Student: {
                    Name: 'Tom',
                    age: 20
                }
            }
        })
    </script>

 

 

 第三个参数表示索引数字

    <div id="vm">
        <ul>
            <li v-for="(item,index1,index2) in Student">
                {{ item}},{{index1}},{{index2}}
            </li>
        </ul>
    </div>

 

 

4.状态维护

？？？

 

5.数组更新

（1）这几个方法可以触发视图更新

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

根据1.的代码测试

vm.items.push({ message: 'Baz' })

 

 （2）替换数组

？

6.vue里添加响应式的变量

默认vue创建以后的变量不是响应式的。可以使用

目录3.的代码，控制台输入

Vue.set(vm.Student, 'sex', '男')

 

 

7.显示过滤、排序结果

    <div id="vm">
        <ul>
            <li v-for="n in evenNumbers">{{ n }}</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#vm',
                data: {
                  numbers: [ 1, 2, 3, 4, 5 ]
                },
                computed: {
                  evenNumbers: function () {
                    return this.numbers.filter(function (number) {
                      return number % 2 === 0
                    })
                  }
                }
        })
    </script>

在计算属性不适用的情况下

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

 

8.组件上使用v-for

？