第三章条件判断与列表渲染

最新推荐文章于 2024-05-02 18:12:22 发布

VIP文章振先森

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量1.9k

点赞数 4

分类专栏： Web前端高级技术（Vue.js)笔记文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/Gene_zhen/article/details/120275940

版权

第三章条件判断与列表渲染

一、条件判断

1、v-if指令

v-if是一个指令，必须将它添加到一个元素上，根据表达式的结果判断是否输出该元素。

实例：输出数据对象中属性a和b的值，并根据比较两个属性的值，判断是否输出比较结果

<div id="box">
    <p>a的值是{
  {a}}</p>
    <p>b的值是{
  {b}}</p>
<p v-if=“a<b”>a小于b</p>
</div>
<script type=“text/javascript”>
     var demo=new Vue({
            el:’#box’
            data:{
                   a:100,
                   b:200,
        }
});
</script>

如果需要对一元素进行判断，需要使用<template>元素作为包装元素，并在该元素上使用v-if，最后的渲染结果中不会包含<template>元素

实例：根据表达式的结果判断是否输出一组单选按钮。

<div id="example">
    <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 demo = new Vue({
        el:'#example',
        data:{
            show: true
        }
    });
</script>

2、v-else指令

v-else指令的作用相当于JavaScript中的else语句部分，可以与v-if指令配合使用。

实例：输出数据对象中的属性a和b的值，并根据比较两个属性的值，输出比较的结果。

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

实例：应用v-if指令和v-else指令判断2019年2月份的天数。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断2019年2月份的天数</title>
<script src="../JS/vue.js"></script>
</head>
<body>
<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 demo = new Vue({
        el : '#box',
        data : {
			year : 2019
		},
		methods : {
			show : function(days){
				alert(this.year+'年2月份有'+days+'天');//弹出对话框
			}
		}
    });
</script>
</body>
</html>

3、v-else-if指令

v-else-if指令的作用相当于JavaScript中的else if语句部分。

注意：

v-else指令必须紧跟在v-if指令或v-else-if指令的后面，否则v-else指令将不起作用。
v-else-if指令也必须紧跟在v-if或者v-else-if指令的后面。

实例：

将某学校的学生成绩转化为不同等级，划分标准如下：

①“优秀”，大于等于90分；

②“良好”，大于等于75分；

③“及格”，大于等于60分；

④“不及格”，小于60分。

假设刘星的考试成绩是85分，输出该成绩对应的等级。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断考试成绩对应的等级</title>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="box">
	<div v-if="score>=90">
		刘星的考试成绩优秀
	</div>
	<div v-else-if="score>=75">
		刘星的考试成绩良好
	</div>
	<div v-else-if="score>=60">
		刘星的考试成绩及格
	</div>
	<div v-else>
		刘星的考试成绩不及格
	</div>
</div>
<script type="text/javascript">
    var demo = new Vue({
        el : '#box',
        data : {
			score : 85
		}
    });
</script>
</body>
</html>

4、v-show指令

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

和v-if指令不同，使用v-show指令的元素，无论表达式的值为true还是false，该元素都始终会呗渲染并保留在DOM中。绑定值得改变只是简单地切换元素的CSS属性display。

注意：v-show指令不支持

最低0.47元/天解锁文章

振先森

关注

4
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
第三章条件判断与列表渲染

第三章条件判断与列表渲染一、条件判断1、v-if指令v-if是一个指令，必须将它添加到一个元素上，根据表达式的结果判断是否输出该元素。实例：输出数据对象中属性a和b的值，并根据比较两个属性的值，判断是否输出比较结果<div id="box"> <p>a的值是{{a}}</p> <p>b的值是{{b}}</p><p v-if=“a<b”>a小于b</p></div><s
复制链接

扫一扫