精华内容
下载资源
问答
  • v-ifv-else和v-else-if的用法

    千次阅读 2020-06-28 10:02:37
    今天将给大家介绍vue.js中常见指令v-ifv-else和v-else-ifv-if的用法 v-if根据判断条件的值来有条件的渲染元素。如果条件的值为真,则元素出现在页面中。反之则不会出现。 判断条件可以是一个变量: <div id=...

    说明

    今天将给大家介绍vue.js中常见指令v-if、v-else和v-else-if。

    v-if的用法

    v-if根据判断条件的值来有条件的渲染元素。如果条件的值为真,则元素出现在页面中。反之则不会出现。
    判断条件可以是一个变量:

    <div id="app">
    	<p v-if="flag">Hello</p>
    </div>
    <script>
    	new Vue({
    		el: "#app",
    		data: {
    			flag: true,
    		},
    	});
    </script>
    

    判断条件也可以是一条语句:

    <p v-if="5>3">Hello</p>
    

    v-else的用法

    v-else不需要判断条件,但是它的前一个兄弟元素必需是v-if或者v-else-if。它为v-if或v-else-if添加了else块。

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    		<title>Document</title>
    	</head>
    	<body>
    		<div id="app">
                <p v-if="flag">Hello</p>
    			<p v-else>Vue</p>
            </div>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		<script>
    			new Vue({
    				el: "#app",
    				data: {
    					flag: false,
    				},
    			});
    		</script>
    	</body>
    </html>
    

    v-else-if的用法

    v-else-if的前一兄弟元素必须有 v-if 或 v-else-if。

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    		<title>Document</title>
    	</head>
    	<body>
    		<div id="app">
    			<p v-if="flag=='a'">a</p>
    			<p v-else-if="flag=='b'">b</p>
    			<p v-else-if="flag=='c'">c</p>
    			<p v-else>d</p>
    		</div>
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		<script>
    			new Vue({
    				el: "#app",
    				data: {
    					flag: "c",
    				},
    			});
    		</script>
    	</body>
    </html>
    

    结语

    以上就是我对v-if、v-else和v-else-if的理解,希望对您能有帮助!
    在这里插入图片描述

    展开全文
  • 1. true 显示元素:v-if的值和seen 属性值一致,为 true。&lt;p&gt;元素显示 &lt;div id="app-3"&gt; &lt;p v-if="seen"&gt;现在你看到我了&lt;/p&gt; &...

     

    用法一、布尔值ture/false 显示/隐藏元素

    1. true 显示元素:v-if的值和seen 属性值一致,为 true。<p>元素显示

    
    <div id="app-3">
      <p v-if="seen">现在你看到我了</p>
    </div>
    
    <script>
    var app3 = new Vue({
      el: '#app-3',
      data: {
        seen: true
      }
    })
    </script>

    2.flase 隐藏元素:把app3.seen 属性值改为false,v-if的值也为false,<p>元素隐藏

    <div id="app-3">
      <p v-if="seen">现在你看到我了</p>
    </div>
    
    <script>
    var app3 = new Vue({
      el: '#app-3',
      data: {
        seen: true
      }
    })
    
    app3.seen=false
    </script>

     

    用法二、在<template>元素上使用,显示/ 隐藏整个分组(就是同时显示/ 隐藏多个元素)

    注意:

    vue 函数绑定的元素要包裹在  <template> 元素外面,也就是说,要绑定在<template> 元素的父元素上,不能直接绑定在<template>元素

    例子中,a=new Vue 绑定在 <template> 的父元素<div id="app">

    <div id="app">  
    <template v-if="true">
    <p id="a" v-html="rawHtml">Using mustaches: {{ rawHtml }}</p>
    <p >Using v-html directive: </p>
    </template>
    </div>
    
    <script> //vue js 代码写在这里
    
    var a=new Vue({
    el:"#app",                 //绑定的元素
    data:{ rawHtml:'<span style="color:red">利用vue添加了插入一个span 元素</span>'  //元素内数据代码 message
    }
    });
    
    </script>

    当v-if 的值为 true 时,网页显示<template> 包裹的所有元素

    网页效果:

    当v-if 的值为 false 时,网页隐藏<template> 包裹的所有元素

    <div id="app">  
    <template v-if="flase">
    <p id="a" v-html="rawHtml">Using mustaches: {{ rawHtml }}</p>
    <p >Using v-html directive: </p>
    </template>
    </div>

    网页效果:<template> 包裹的<p>元素 都被隐藏了

     


     v-else 和 v-else-if 元素必须紧跟在带 v-if 或者 v-else-if  的元素之后, 否则无法识别

    1. v-else 用法

     2.v-else-if 用法 



    v-show

    一、定义: 

    v-show 不支持<template> 元素,也不支持 v-else

    二、v-if 与v-show 区别

    共同点:都可以实现渲染和隐藏的功能

    区别:带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display

    展开全文
  • v-ifv-else-if, v-else的实际使用

    千次阅读 2019-08-19 16:42:33
    需求是医疗水平,价格水平,服务态度分值都为0-10分,1-4分是红色,5-7分是黄色,8-10分是绿色,数据均从后台请求过来的。 一开始想的是通过Vue中ref属性,...后来发现不行,通过打断点自己写的if语句都能走通,但赋...

    在这里插入图片描述
    需求是医疗水平,价格水平,服务态度分值都为0-10分,1-4分是红色,5-7分是黄色,8-10分是绿色,数据均从后台请求过来的。

    一开始想的是通过Vue中ref属性,可以获取到当前元素,在数据请求回来后直接通过map遍历,然后直接行内修改样式的方法

    this.refs.medicalScore.style.color = 'yellow'
    

    后来发现不行,通过打断点自己写的if语句都能走通,但赋值结果只以最后一次的颜色为基准,应该是map的遍历的方法原因,后一次吧前一个赋值的结果给覆盖掉了。

    现在想想当时写的的确不对,因为这是评价会有好多条的,而我的赋值是给同一个标签赋的颜色所以会覆盖掉,而我应该在遍历这条评价的时候进行赋值颜色
    因此用的了v-if,其实v-show也可以的。

    正确的代码为:

    <li>
    	<p>医疗水平:
    	     <span v-if="item.medicalScore>0&&item.medicalScore<=4"
    	           style="color:#FB1818">{{item.medicalScore}}分</span>
    	     <span v-else-if="item.medicalScore>=5&&item.medicalScore<=7"
    	           style="color:#F5A623">{{item.medicalScore}}分</span>
    	     <span v-else style="color:#00D7AE">{{item.medicalScore}}分</span>
    	 </p>
     </li>
     <li>
    	 <p>价格水平:
    	     <span v-if="item.priceScore>0&&item.priceScore<=4"
    	           style="color:#FB1818">{{item.priceScore}}分</span>
    	     <span v-else-if="item.priceScore>=5&&item.priceScore<=7"     
    	           style="color:#F5A623">{{item.priceScore}}分</span>
    	     <span v-else style="color:#00D7AE">{{item.priceScore}}分</span>
    	 </p>
     </li>
     <li>
    	 <p>服务态度:
    	     <span v-if="item.serviceScore>0&&item.serviceScore<=4"
    	           style="color:#FB1818">{{item.serviceScore}}分</span>
    	     <span v-else-if="item.serviceScore>=5&&item.serviceScore<=7"
    	           style="color:#F5A623">{{item.serviceScore}}分</span>
    	     <span v-else style="color:#00D7AE">{{item.serviceScore}}分</span>
    	 </p>
     </li>
    
    展开全文
  • Vue使用v-for遍历的时候,通过{{}}进行赋值 {{user.companyName = item.companyName}} <select class="form-control" v-model="user.companyId">...option :value="item.companyId" v-if="u

    Vue使用v-for遍历的时候,通过{{}}进行赋值

    {{user.companyName = item.companyName}}
    
    <select class="form-control" v-model="user.companyId">
        <!-- 遍历所有的公司信息 -->
        <template v-for="item in allCompany">
            <option :value="item.companyId" v-if="user.companyId == item.companyId"  selected="selected">
          	    <!-- 使用{{}}进行赋值,将遍历选中的赋值给date数据companyName -->
                {{user.companyName = item.companyName}}
            </option>
            <option :value="item.companyId" v-else>{{item.companyName}}</option>
        </template>
    </select>
    

    Vue使用v-if的三目表达式进行赋值

    v-if="user.companyId == item.companyId?user.companyName = item.companyName:''"
    
    <select class="form-control" v-model="user.companyId">
        <!-- 遍历所有的公司信息 -->
        <template v-for="item in allCompany">
        	<!-- 使用三目表达式赋值 -->
            <option :value="item.companyId" v-if="user.companyId == item.companyId?user.companyName = item.companyName:''"  selected="selected">
            </option>
            <option :value="item.companyId" v-else>{{item.companyName}}</option>
        </template>
    </select>
    
    展开全文
  • Vue指令v-show和v-if的区别

    万次阅读 2020-11-27 10:49:23
    v-ifv-show是在前端开发中是比较常用的Vue指令,经常用来判断渲染部分代码块
  • Vue.js 指令v-for和v-ifv-show

    千次阅读 2019-02-19 23:03:11
    Vue指令之v-for和key属性 迭代数组 &amp;amp;amp;amp;lt;ul&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;li v-for=&amp;amp;amp;quot;(item, i) in list&amp;amp;amp;quot;&amp;amp;amp;...
  • v-bind:class="{ active: isActive }" 官方文档地址:https://cn.vuejs.org/v2/guide/class-and-style.html <!--绑定了changeColor样式,changeC默认为false,单击变非--> <div v-bind:class="{ch...
  • vue之v-if v-else-if v-else 使用

    千次阅读 2018-12-09 22:42:34
    vue之v-if v-else-if v-else 使用: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vue ...
  • uniapp之v-if

    千次阅读 2021-02-08 10:40:35
    v-ifv-show 共同点 都能够控制元素的显示或者是隐藏 手段的区别 v-if指令是先经过判断是否经过,才会创建DOM节点,根据DOM节点来控制显示与隐藏 v-show指令是通过改变元素的CSS属性来决定元素是显示还是隐藏。...
  • vue中v-for 与 v-if 使用错误

    千次阅读 2021-10-22 19:43:17
    元素中使用v-for: 开发工具:vscode vue插件:Vetur 错误原因: ​ 一个Vetur代码检查插件爆出:Elements in iteration ...​ 因为v-for的优先级比v-if高,可以将代码块包装到一个template(H5 标签)标签中,将绑
  • v-if v-else v-else-if v-if v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。 < div id=“app”> < p v-if=“seen”>现在你看到我了</ p> </ div> < script>...
  • 1 v-if指令 1.1 v-if:根据表达式的布尔值判断是否插入标签  v-if指令,当show为true时显示div内容,当show为false时隐藏div内容 &lt;div id="root"&gt; &lt;div v-if="show"...
  • Vue中v-ifv-show区别与用法解析

    千次阅读 2020-02-13 18:41:51
    一、v-ifv-show的异同点 1.相同点 :v-ifv-show都可以动态控制DOM元素的显示隐藏。 2.不同点:v-if是动态地向DOM树中添加或删除DOM元素节点;v-show是通过向DOM元素设置样式display属性值控制显示隐藏。 我们...
  • 背景:vue中经常使用到v-for和v-if,那么它们的优先级是怎么样的呢?怎么才能实现性能优化呢?下面来简单分析一下,如何分析,请参考以下测试demo,以及源码中参考src/compiler/codegen/index.js。demo代码如下: ...
  • Vue指令之v-if

    千次阅读 2020-11-23 14:21:47
    v-if和js里的if差不多,也会有v-else-ifv-else,js里的if判断是用于在js语法里面的判断,v-if在vue中是对于代码块的判断; 如 <p v-if="isShow">不装了,我摊牌了,没错你要找的就是我</p> 当...
  • 也就是说,上面的bug有两个解决方案,一个是v-show + transition-group或者v-if + v-else + transition。 后者v-if + v-else会被视为一个元素(亲测)而v-show在这种情况下只能算两个元素。 官方似乎没有说明这个...
  • v-if v-else v-else-if v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回truth值的时候被渲染。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
  • v-for和v-if一起使用的正确方法

    千次阅读 2020-12-20 20:53:33
    v-for和v-if尽量不要一起使用,有别的方法替代。
  • vue中v-ifv-else-if在页面加载的时候,不满足条件的标签会加载然后再消失掉,如果要解决这个问题,案例如下: vue html代码块: &lt;div id="divApp"&gt; &lt;div v-if="type ===...
  • vue.js v-for嵌套 + v-if

    千次阅读 2019-12-11 18:31:51
    在开发权限控制过程中,需求嵌套多层 v-for ,并且需要 v-if 判断是否需要显示标签(前端使用layui),直接代码如下: html代码: <ul id="app-4" class="layui-nav layui-nav-tree" lay-shrink="all" lay-...
  • vue中 v-ifv-show的理解和实例使用

    千次阅读 2019-08-16 16:27:26
    相同的地方:v-ifv-show都可以动态控制dom元素显示隐藏 不同的地方:如果v-if指令的值为假,那么这个元素不会被插入DOM。 举个例子: V-if <div v-if = "true">one</div> <div v-if = "false">...
  • v-ifv-for一起使用的正确方法

    千次阅读 2020-12-24 10:01:07
    我们可能需要会想到将v-for和v-if同时使用: 选择性地渲染列表,例如根据某个特定属性来决定是否渲染 <div v-for="item in itemList" v-if="item.isShow">{{item.value}}</div> 避免渲染本该隐藏的...
  • vue中v-ifv-show同时使用

    千次阅读 2021-01-08 16:17:22
    在工作中努力写bug的时候发现一个问题,由于用echarts写了八九个图表,还是计时器动态加载X轴和数据的那种,可想而知浏览器卡到爆炸,于是使用v-if控制组件图表的渲染,发现又出问题:关闭组件再次打开之后,图表...
  • v-ifv-show 的区别

    万次阅读 多人点赞 2019-07-31 19:19:50
    一、v-ifv-show 的区别 手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐 编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部...
  • 第一种用法:v-if —— v-else-if ——v-else <el-table-column prop="versionStatus" label="状态"> <template slot-scope="scope"> <p v-if="scope.row.versionStatus=='1'">在用</...
  • v-for和v-if的优先级及其性能优化一、案例分析1. 两者同级时2. 两者不同级时二、源码解析三、结论和优化方案 一、案例分析 <!DOCTYPE html><html> <head> <title>Vue事件处理</title...
  • 1.在Vue中监听事件使用v-on指令 v-on 作用:绑定事件监听器 缩写(语法糖):@ (如v-on:click可简写为@click) 当通过methods中定义方法,以供@click调用时,需要注意参数问题: 情况一:如果该方法不需要额外参数,...
  • Vue v-ifv-show 以及v-if中遇到的坑

    千次阅读 2018-08-20 22:57:14
    最近在项目开发中,遇到一个难以描述的问题: ...RadioGroup v-model="formdata.radio1" @on-change="changetableType($event)"&gt; &lt;Radio v-for="(item, index) i.
  • Vue-学习笔记-06 v-if详解

    千次阅读 2020-07-25 13:16:03
    文章目录一、Vue中的v-ifv-show1.1 v-if 决定是否渲染 基本使用:1.2 v-show 决定是否显示1.3 v-ifv-show的区别1.4 v-if 根据成绩返回评价二、小案例 点击切换登录的类型 一、Vue中的v-ifv-show v-ifv...
  • vue中v-ifv-else同时生效

    千次阅读 2020-11-02 17:53:24
    产生问题:下面代码v-ifv-else同时生效两个 <el-table-column label='身份证' width='200'> <template slot-scope='scope'> <span prop='card' v-if='scope.row.OBJECTID' @click="openNewPage...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,339,629
精华内容 935,851
关键字:

v-if