Vue条件判断与列表渲染

轮孑哥

已于 2023-02-23 11:18:31 修改

阅读量1.5k

点赞数 1

分类专栏： vue 笔记文章标签： vue.js javascript 前端

于 2022-11-03 00:27:38 首次发布

本文链接：https://blog.csdn.net/qq_46149597/article/details/127659717

版权

vue 同时被 2 个专栏收录

15 篇文章 2 订阅

订阅专栏

笔记

6 篇文章 0 订阅

订阅专栏

一、条件判断

二、列表渲染

三、数组的变异方法

一、条件判断

条件判断有 v-if、v-else、v-else-i、v-show指令

<div id="element">
    <p v-if="numberThree < nunberTwo">Three less than two is true</p>
    <p v-else-if="numberTwo < nunberOne">Two less than one is true</p>
    <p v-else>Three less than two is false && Two less than one is false</p>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    var demo = new Vue({
        el: '#element',
        data: {
            numberOne: 1 ,
            nunberTwo: 2 ,
            numberThree: 3
        }
    })

</script>

需要注意：v-else和v-else-if指令必须紧紧跟在在v-if或v-else-if指令后面。v-if是一个指令，必须将它添加到一个元素上去，根据表达式的结果判断是否输出该元素，如果需要对一组元素进行判断，需要使用<template>元素作为包装元素，并在该元素上使用v-if，最后的渲染结果中不会包含<template>元素。

<div id="element">
    <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 src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    var demo = new Vue({
        el: '#element',
        data: {
            show:true
        }
    })

</script>

v-show 指令是根据表达式的值来判断是否显示或隐藏DOM元素。当表达式的值为true时，元素将被显示；为false时元素将被隐藏，相当于为元素添加内联样式style=“display:none”。

<div id="element">
    <button v-on:click="clickMe">点击</button>
    <br>
    <p v-show="show">我显示了</p>
    <p v-show="!show">我隐藏了</p>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    var demo = new Vue({
        el: '#element',
        data: {
            show:true
        },
        methods:{
            clickMe:function(){
                this.show=!this.show
            }
        }
    })

</script>

与v-if指令不同，使用v-show指令的元素，无论表达式的值是true还是false，该元素始终都会被渲染并保留在DOM中，v-if是惰性，如果初始条件为false，那么v-if本身什么也会做，因此从渲染的角度来说v-if消耗更小；在进行v-if切换时，因为v-if中的模板可能包含数据绑定或子组件，所以Vue.js会有一个局部编译/卸载的过程，而在进行v-show切换时仅仅改变了样式，因此从切换角度来说v-show消耗更小。

二、列表渲染

v-for指令将接收数组中的数据重复渲染Dom元素。该指令需要使用( item ,index ) in items形式的语法,其中items为数组名称，item为数组元素的别名,index为索引。

<div id="element">
    <div v-for="(item,index) in items">{{index}}————{{item.name}}</div>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    var demo = new Vue({
        el: '#element',
        data: {
            items:[
                { name:'H' },
                { name:'e' },
                { name:'l' },
                { name:'l' },
                { name:'o' }
            ]
        }
    })

</script>

在<template>元素中使用v-for，如果需要对一组数据进行循环，可以使用<template>元素作为包装元素，并在该元素上使用v-for指令

<div id="element">
    <ul>
        <template v-for="item in items">
            <div>*****</div>
            <li>{{item}}</li>
            <div>*****</div>
        </template>
    </ul>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    var demo = new Vue({
        el: '#element',
        data: {
            items:[
                { name:'H' },
                { name:'e' },
                { name:'l' },
                { name:'l' },
                { name:'o' }
            ]
        }
    })

</script>

三、数组的变异方法

Vue.js中包含了一些检测数组变化的变异方法，调用这些方法可以改变原始数组，并出发视图更新。数组的变异方法有：

push() 向数组的末尾添加一个或多个元素
pop() 将数组中的最后一个元素从数组中删除
shift() 将数组中的第一个元素从数组中删除
unshift() 向数组中的开头添加一个或多个元素
splice() ，splice(index,len,[item]) index数组下标，len长度，[item]替换的内容，[item]为空则删除。添加或删除数组中的元素
sort() 对数组中的元素进行排序
reverse() 对数组中的元素进行逆序

还可以向对象中添加属性，在已经创建的实例中，使用全局方法Vue.set(object,key,value),或实例方法vm.$set(object,key,value)可以向对象添加响应式属性，添加多个响应式属性可以使用Object.assign()方法，同时触发视图更新

<div id="element">
    <button v-on:click="Push">向数组的末尾添加一个或多个元素</button><br />
    <button v-on:click="Pop">将数组中的最后一个元素从数组中删除</button><br />
    <button v-on:click="Shift">将数组中的第一个元素从数组中删除</button><br />
    <button v-on:click="UnShift">向数组中的开头添加一个或多个元素</button><br />
    <button v-on:click="Splice">添加或删除数组中的元素</button><br />
    <button v-on:click="Sort">对数组中的元素进行排序</button><br />
    <button v-on:click="Reverse"> 对数组中的元素进行逆序</button><br />
    <div v-for="item in items">{{item}}</div><br />
    <p>全局方法添加新属性</p><br />
    <button onclick="clickMe()">添加多个响应式属性</button><br />
    <div v-for="(index,item) in object">{{item}}——{{index}}</div><br />
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    var demo = new Vue({
        el: '#element',
        data: {
            items: ['a', 'b'],
            object: {
                name: 'zhangsan',
                age: '25'
            }
        },
        methods: {
            Push: function () {
                this.items.push('e')
            },
            Pop: function () {
                this.items.pop()
            },
            Shift: function () {
                this.items.shift()
            },
            UnShift: function () {
                this.items.unshift('a', 'b')
            },
            Splice: function () {
                this.items.splice(0, 2, 'a')
            },
            Sort: function () {
                this.items.sort()
            },
            Reverse: function () {
                this.items.reverse()
            }
        }
    })

    //全局方法添加新属性
    Vue.set(demo.object, 'sex', 'gay')

    function clickMe() {
        //添加多个响应式属性
        demo.object = Object.assign({}, demo.object, {
            address: 'Japan',
            hobby: 'Eat s.h.i.t'
        })
    }
</script>

同时v-for指令还可以遍历整数，接收的整数即为循环次数。

<div id="element">
    <div v-for="n in count">这是循环遍历的第{{n}}次</div>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    var demo = new Vue({
        el: '#element',
        data: {
            count: 6
        }
    })

</script>