Vue学习笔记（二）------条件判断与列表渲染

最新推荐文章于 2024-01-17 09:14:03 发布

时间识人

最新推荐文章于 2024-01-17 09:14:03 发布

阅读量980

点赞数

分类专栏：学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_45765949/article/details/118027815

版权

学习笔记专栏收录该内容

23 篇文章 1 订阅

订阅专栏

一：条件判断

1：v-if指令

v-if指令会根据它带的表达式的true或者false来决定该元素是否输出。格式如下：

<p v-if="表达式">值</p> //如果表达式值为true则输出，否则不输出

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 条件判断指令</title>
    <script src="Vue/vue.js"></script>
</head>
<body>
<div id="box">
    <p>a={{a}}</p>
    <p>b={{b}}</p>
    <p v-if="a>b">a>b</p>
</div>
<script>
    var demo=new Vue({
        el:'#box',
        data:{
            a : 200,
            b : 100,
        }
    })
</script>
</body>
</html>

【注】v-if指令表达式为false时，元素是直接不会被渲染到页面的。

2：在< template>元素中使用v-if

如果需要对一组元素进行判断，需要使用template元素作为包装元素。如：

<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>
    var demo=new Vue({
        el:'#box',
        data:{
            show :true
        }
    })
</script>

3：v-else指令

v-else指令与JavaScript中的else语句功能一致，通常和v-if指令在一起搭配使用。例如将上面的程序中可以添加这条语句。

<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>
    var demo=new Vue({
        el:'#box',
        data:{
            a : 200,
            b : 100,
        }
    })
</script>

4:v-else-if指令

v-else-if指令与JavaScript中的else if语句功能一致，通常和v-if指令在一起搭配使用。例如：

<div id="box">
    <p v-if="score>=90">成绩为优秀</p>
    <p v-else-if="score>=80">成绩为优良</p>
    <p v-else>成绩为及格</p>
</div>
<script>
    var demo=new Vue({
        el:'#box',
        data:{
           
            score :70
        }
    })

5：v-show指令

v-show指令与v-if指令功能一致，但不同的是v-show指令不论表达式值为真还是假，都会将该元素渲染到DOM中，只是表达式为真是修改css属性display为显示，表达式结果为false时，修改display属性为none。二者的区别如下：


 1. 在进行v-if切换时，因为v-if中的模板可能包括数据绑定和子组件，因此vue.js会有一个
局部编译和卸载的过程。然而v-show发生变化是，仅仅改变了样式，从切换的角度来看v-show
的消耗是低于v-if的。
 2. v-if是惰性的，如果初值为false，不会有任何操作，而v-show是会把元素渲染到DOM中的。从渲染角度
看，v-if消耗性能低于v-show
 3. 总的来说v-if比v-show有着更好的切换消耗，而v-show比v-if有更高的渲染消耗，需要频繁的切换时，v-
show更好，否则v-if好用。

二：列表渲染

所谓的列表渲染是指将数组或者对象中的数据循环渲染到DOM中，在Vue.js中，使用v-for指令来完成。

1：利用v-for指令遍历数组

格式：<元素 v-for=“item in items”>{{item.name}}</元素>
其中
items为数组的名称 item为数组的别名，通过别名可以遍历数组中的每个元素。例如，v-if指令可以输出数组中存放的人物名称。

<div id="box">
    <ul>
        <li v-for="item in items">{{item.name}}</li>
    </ul>
</div>
<script type="text/javascript">
    var demo=new Vue({
        el:'#box',
        data:{
            items:[
                {name : 'Bob'},
                {name : 'Alice'},
                {name : 'Tom'}
            ]
        }
    })
</script>

结果为：
在这里插入图片描述

另一种v-if的使用方式格式为：<元素 v-for=“(item,index) in items”>{{index}}-{{item.name}}</元素>
index维数组元素的索引
修改上述代码：

<div id="box">
    <ul>
        <li v-for="(item,index) in items">{{index}}-{{item.name}}</li>
    </ul>
</div>
<script type="text/javascript">
    var demo=new Vue({
        el:'#box',
        data:{
            items:[
                {name : 'Bob'},
                {name : 'Alice'},
                {name : 'Tom'}
            ]
        }
    })
</script>

此时结果为：
在这里插入图片描述

添加了索引。

2：在< template>中使用v-for指令

与if一样当需要对一组元素进行循环，使用< template>包裹。例如下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            display: flex;
            justify-content: center;
        }
        template{
            display: flex;
            float: left;
        }
        li{
            display: inline;
            padding-right: 20px;
            font-size: 20px;
            font-family: '微软雅黑';
            font-weight: bold;
        }
    </style>
    <script src="Vue/vue.js"></script>
</head>
<body>
<div id="box1">
    <ul>
        <template v-for="menu in menulist">
            <li class="item">{{menu}}</li>
            <li class="separator">|</li>
        </template>
    </ul>
</div>

<script type="text/javascript">
    var demo1=new Vue({
        el:'#box1',
        data:{
            menulist:['首页','山沟','生鲜','团购','全球购']
        }
    })
</script>
</body>
</html>

运行结果：
在这里插入图片描述

3：数组更新检测

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

push（）	向数组的末尾添加一个或者多个元素
pop()	向数组的最后一个元素从数组中删除
shift()	将数组的第一个元素删除
unshift()	向数组的开头添加一个或者多个元素
splice()	添加或者删除数组的元素
sort()	对数组的元素进行排序
reverse()	颠倒数组中元素的排序顺序

例如上面的列子中添加一个元素：

demo1.menulist.push('拼团'); //在script标签最后添加这一句

结果为：
在这里插入图片描述
除了变异方法还有几个非变异方法：

filter()	返回一个新数组
concat()	将一个或多个数组组合到原数组中，组成新的数组返回
slice(n)	返回一个新数组，元素为原始数组的下标为n后面的所有元素

【注】
（1）非变异方法不会修改原数组，而是新建立一个数组返回
（2）Vue中利用索引设置元素的值时，需要调用全局方法：Vue.set()
（3）Vue中改变数组大小同样使用全局方法：splice()
如：

Vue.set(demo.items,1,{name:'Danny'}//也可以使用demo.$set(demo.items,1,{name:'Danny'}
demo.items.splice(2) //修改数据长度为2

4：利用v-for指令遍历对象

格式：<元素 v-for=“value in object”>{{ivalue}}</元素> 例如：

<div id="box">
    <ul>
        <li v-for="value in object">{{value}}</li>
    </ul>
</div>
<script>
    var demo=new Vue({
        el:'#box',
        data:{
            object:{
                name: 'Tom',
                sex: '男',
                age:  15
            }
        }
    })
</script>

运行结果：
在这里插入图片描述
同样对象的遍历还有一种格式：<元素 v-for=“(value,key) in object”>{{key}}:{{ivalue}}</元素>
对上面例子修改：

<div id="box">
    <ul>
        <li v-for="(value,key) in object">{{key}}:{{value}}</li>
    </ul>
</div>

运行结果：
在这里插入图片描述
当然也可以给对象添加索引输出，修改代码：

<div id="box">
    <ul>
        <li v-for="(value,key,index) in object">{{index}}-{{key}}:{{value}}</li>
    </ul>
 <div>

运行结果：
在这里插入图片描述

向对象中添加属性

Vue中可以通过全局方法：Vue.set(object,value,key)或者实例方法vm.$set(object,value,key)添加响应式属性，同时触发渲染。

/div>
<script>
    var demo=new Vue({
        el:'#box',
        data:{
            object:{
                name: 'Tom',
                sex: '男',
                age:  15
            }
        }
    })
    Vue.set(demo.object,'phone','16628546542');
</script>

在上面的例子中添加了一个新的属性phone，结果为：
在这里插入图片描述
也可以使用Object.assign()方法为其添加多个属性，但需要注意的是该方法是将旧的属性和新的属性合并为一个新的对象：

<script>
    var demo=new Vue({
        el:'#box',
        data:{
            object:{
                name: 'Tom',
                sex: '男',
                age:  15
            }
        }
    })
    demo.object=Object.assign({},demo.object,{
        hobby: 'basktebale',
        interst:'sing'
    })
</script>

6：v-for指令遍历整数

v-for遍历整数是指给定整数，然后将模板循环整数次。格式为：<元素 v-for=“n in N”>{{N}}</元素> 如：

<div id="box">
    <div v-for="n in 5">这是第{{n}}循环 累加时间为：{{n*time}}</div>
</div>
<script>
    var demo=new Vue({
        el:'#box',
        data:{
            time:5
        }
    })

运行结果：
在这里插入图片描述
利用v-for整数遍历实现99乘法表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V-for遍历整数</title>
    <script src="Vue/vue.js"></script>
</head>
<body>
<div id="box">
    <div v-for="n in 9">
        <span v-for="m in n">{{m}}*{{n}}={{m*n}}&nbsp;&nbsp;</span>
    </div>
</div>
<script>
    var demo=new Vue({
        el:'#box',
        data:{
            time:5
        }
    })
</script>
</body>
</html>