精华内容
下载资源
问答
  • 2021-04-29 10:40:42

    多选下拉框
    elasticComputeCloudWarningForm.noticeType=[0,1,2,3]

    <FormItem :label="$t('alarms.common.noticeType')" prop="noticeType">
    	<Select v-model="elasticComputeCloudWarningForm.noticeType" multiple style="width:300px;" :placeholder="$t('alarms.common.pleaseSelect')">
        	<Option v-for="item in alarmWayList" :value="item.id" :key="item.id">{{ item.name }}</Option>
      	</Select>
    </FormItem>
    
    

    当上述内容为 3(企业微信机器人)时 显示下面的下拉框
    v-if="elasticComputeCloudWarningForm.noticeType.filter(function (item) { return item == 3; }).length != 0"

    <!-- 企业微信机器人URL -->
    <FormItem label="企业微信机器人URL" prop="enterpriseWechatRobotIds" v-if="elasticComputeCloudWarningForm.noticeType.filter(function (e) { return e == 3; }).length != 0">
    	<Select v-model="elasticComputeCloudWarningForm.enterpriseWechatRobotIds" multiple style="width:300px;" :placeholder="$t('alarms.common.pleaseSelect')">
        	<Option v-for="item in enterpriseWechatRobotIdsList" :value="item.id" :key="item.id">{{ item.name }}</Option>
     	</Select>
    </FormItem>
    
    更多相关内容
  • 主要介绍了VUEV-IF条件判断改变元素的样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随想过来看看吧
  • v-show与v-if作用 一.v-show 控制元素显示, 通过display:...v-if通过控制标签是否删除显示 , v-if有性能优势 三. 代码示例 <template> <div> <h1 v-show="age >= 18">年满18岁才能看到以下内容&

    v-show与v-if作用

    一.v-show

    控制元素显示, 通过display: none控制显示

    语法: v-show=“变量或者表达式”

    如果变量或者表达式为true, 会显示标签, 否则隐藏

    二. v-if

    v-if控制标签显示
    语法: v-if=“变量或者表达式”
    v-if通过控制标签是否删除显示 , v-if有性能优势

    三. 代码示例

    <template>
      <div>
        <h1 v-show="age >= 18">年满18岁才能看到以下内容</h1>
    	<hr>
        <h1 v-if="age >= 18">年满18岁才能看到以下内容</h1>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          age: 1,
        };
      },
      methods: {},
    };
    </script>
    
    <style></style>
    
    

    四.v-if-else

    v-if可以和v-else搭配, 用来条件控制显示
    v-if和v-else一定要是相邻元素
    v-if和v-else-if还有v-else可以一起搭配, 实现多个条件判断
    v-show是不可以和v-else搭配使用

    代码示例

    <template>
      <div>
        <h1 v-if="age >= 18">来吃榴莲</h1>
        <h1 v-else>来吃甜甜圈</h1>
        <h1 v-if="age < 18">甜甜圈</h1>
        <h1 v-else-if="age < 60">枸杞泡水</h1>
        <h1 v-else-if="age < 80">脑白金</h1>
        <h1 v-else-if="age < 100">冬虫夏草</h1>
        <h1 v-else>灵丹妙药</h1>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          age: 18,
        };
      },
      methods: {},
    };
    </script>
    
    <style></style>
    
    
    展开全文
  • div v-if='xians'> 这里是要显示的内容 </div> <div v-else> 这里是不需要显示的内容 </div> //判断路由 data(){ return { xians:this.$route.path.includes('/print') } } ...

    实现功能 : 封装的组件中,功能比较多,有些功能某些页面不需要,
    解决:可以通过路由去设置特定的页面,设置功能需要或者不需要。
    代码实现:

    <div v-if='xians'>
    	这里是要显示的内容
    </div>
    <div v-else>
    	这里是不需要显示的内容
    </div>
    
    //判断路由
    data(){
    	return {
    		xians:this.$route.path.includes('/print')
    		//我所需要的路由是('/print')和('/print-1V1'),
    		//配置时设置('/print')也可以正常使用
    	}
    }
    
    展开全文
  • vue v-if v-show v-for 数组

    2021-12-03 14:49:40
    v-if 通过创建和销毁DOM来显示或者隐藏DOM元素 v-if可以和v-else-ifv-else一起搭配使用 v-if可以直接作用在template标签上 <template> <div class="home"> <template v-if="false">//此时该...

    vue v-if v-show

    v-if 通过创建和销毁DOM来显示或者隐藏DOM元素

    1. v-if可以和v-else-if和v-else一起搭配使用
    2. v-if可以直接作用在template标签上
    <template>
        <div class="home">
            <template v-if="false">//此时该template下面的内容都是不可见的
                <h1>hahah</h1>
            </template>
        </div>
    </template>
    
    1. v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。
    2. 类似于 v-else,v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

    v-show 通过控制DOM元素上的display属性进行显示隐藏的

    注意,v-show 不支持 元素,也不支持 v-else

    v-if 和 v-show

    v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

    v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

    相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

    一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

    v-if 和 v-for官方建议不一起使用

    因为v-if的优先级比v-for高,导致v-if会优先执行当v-if需要v-for里面的数据进行判断时可能就获取不到这样就会导致判断失效

    如果想一起使用的话 可以将v-for移动到template标签上

    <li v-for="todo in todos" v-if="!todo.isComplete">
      {{ todo }}
    </li>
    //将上面代码变成下面的
    <template v-for="todo in todos">
      <li v-if="!todo.isComplete">
        {{ todo }}
      </li>
    </template>
    

    v-for (把一个数组对应为一组元素)

    可以用 in 也可以 of key最好加上以便它能跟踪每个节点的身份,从而重用和重新排序现有元素
    tips:不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。

            <ul>
                <li v-for="(item,index) in items" :key="index">{{ item .name }}</li><!--可以用in循环-->
            </ul>
            <ul>
                <li v-for="(item,index) of items" :key="index">{{ item .name }}</li><!--还可以用of循环-->
            </ul>
    
        data(){
            return {
                items:[
                    {name:'勒布朗',age:36},
                    {name:"戴维斯",age:26},
                    {name:"威少",age:32},
                    {name:"安东尼",age:37},
                    {name:'霍华德',age:37}
                ],
            };
        },
    

    还可以循环对象

    • 第一个参数为对象中属性的值
    • 第二个参数为对象中属性的属性名
    • 第三个参数为循环的索引
      tips:在遍历对象时,会按 Object.keys() 的结果遍历,但是不能保证它在不同 JavaScript 引擎下的结果都一致。
            <ul>
                <li v-for="(val,key,index) of lbj" :key="index">{{ val }}:{{ key }}:{{ index }}</li><!--还可以用of循环-->
            </ul>
                        lbj:{
                    name:'勒布朗',
                    age:36,
                    team:"laker",
                }
    

    当 Vue 正在更新使用 v-for 渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。

    这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。

    数组的变更方法(这些都会改变原数组)

    push() 添加数据 返回值为数组的长度
    pop() 删除最后一个数据 返回被删除的数据
    shift() 删除第一个数据 返回被删除的数据
    unshift() 可想数组前面添加一个或多个元素 返回数组的长度
    splice()
    第一个参数代表删除的起始位置负数就倒着来,第二个代表删除的数量为0就代表不删除,第三个代表添加的数据
    sort((a,b)=>a-b) 排序
    reverse() 反转数组中的元素

    替换数组(不会影响原数组,返回新的数组)

    filter()筛选
    concat()连接
    slice()
    第一个参数:规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)
    第二个参数:规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)

    展开全文
  • v-if:通过 创建、销毁 dom元素的方式达到显示隐藏效果(销毁后有一个占位符 )。 v-show:通过css控制样式style达成显示隐藏效果。 display:none; 隐藏 display:block; 显示 区别: v-if 有更高的切换消耗 ,...
  • v-show="true/false" //控制元素显示/隐藏 示例代码: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> [removed][removed] <script
  • 主要介绍了vue.js使用v-if实现显示隐藏功能,结合简单实例形式分析了使用v-if进行判断实现元素的显示隐藏功能,需要的朋友可以参考下
  • 这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译,所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况。因为在这些判断条件或表达式执行之前,DOM已经渲染出来了,之后Vue...
  • vue提供了一个用于判断v-ifv-else语法,可以通过v-ifv-else进行内容的显示隐藏。下面将通过使用v-ifv-else进行数据的显示隐藏 1、新建一个html页面,然后创建一个div设置id为app,然后在这个div里面...
  • 在此我定义两个属性 v-if=" " <div title="这是操作一" v-if="operation1"></div> <div title="这是操作二" v-if="operation2"></div> js 代码: new Vue({ el: '#app', data:...
  • vue在渲染元素时,处于效率考虑, 会尽量地复用已有的元素而非重新渲染,加上key,就不会复用了,切换类型时键入的内容也会被删除
  • Vue--v-show和v-if

    2022-05-23 13:27:16
    条件渲染目录v-show和v-if v-show和v-if v-show与v-if的区别就是,v-show如果值为false的时候只是添加了一个样式display:none,而...当然不管是哪个,都可以修改为true或者false来决定是显示还是隐藏。 <div id=
  • vue元素显示隐藏 v-ifv-show 指令

    千次阅读 2020-12-16 09:17:13
    vue中,v-ifv-show 会根据接收 true/false 信息使得页面上元素达到显示隐藏的效果。 语法: <标签 v-if="true/false"></标签> <标签 v-show="true/false"></标签> <!--true:...
  • v-if="showPrise"&gt;&lt;/div&gt;  &lt;div title="意向租金" v-if="showRentPrise"&gt;&lt;/div&gt; JS代码: new Vue({  el: '#app',  data:...
  • 项目开发中遇到这样一个功能,根据数组中的数据动态设定el-image的显示隐藏。 1. 问题代码: test.vue中代码: <el-table :data="resRSData" :highlight-current-row="false" height="100%"> <el-table-...
  • Vue条件渲染v-ifv-show

    2022-05-10 18:37:19
    v-if根据条件是否成立来决定内容是否显示。 如果条件成立,创建对应的标签,并显示标签中的内容 如果条件不成立,对应的标签则不存在,内容也不会显示 <div id="app"> <h1>吃了吗?</h1> &...
  • 解决vue h5页面加载时v-if元素闪烁问题
  • totalData这个为获取的数组 v-if =“totalData” 和 v-else 配合使用totalData这个位数组,显示隐藏 刷新的时候先显示v-else 后显示 v-if 如果totalData数据为0的时候就显示v-else空白内容 ** 语法结构: ** <...
  • 文章目录1.vue的条件判断2.v-ifv-else的结合使用3.v-ifv-else和v-else-if的使用4.指令v-show的使用5.用户切换案例 1.vue的条件判断 1.vue的条件判断v-ifv-else-ifv-else,这三个指令与JS的条件语句if、...
  • vuev-ifv-for哪个优先级高?,vuev-ifv-for
  • 谈谈v-if显示隐藏问题

    千次阅读 2021-10-22 17:31:09
    vue条件语句v-if中条件较多时优雅写法 普通写法: v-if=" type==1 || type==2 || type==3 " 优雅写法: v-if=" [1,2,3].includes(type) " 更高级写法: 使用方法,复用性高,适用场景:多个标签都需要用到此判断,...
  • 使用过Vue的小伙伴一定使用过v-if 这个属性,但是这个属性主要是来干什么的呢,他得用途是那些? 这里我总结了一下,v-if使用一般有两个场景: 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素 2- 进行...
  • 1:范围匹配的时候,(取值)显示两个输入框(上线,下线); 2:精确匹配的时候,(取值)显示一个输入框(精确) 二:代码实现 <el-table-column label="取值方式" min-width="100" align="center">...
  • Vue指令之v-if

    千次阅读 2020-11-23 14:21:47
    v-if和js里的if差不多,也会有v-else-if和v-else,js里的if判断是用于在js语法里面的判断,v-if在vue中是对于代码块的判断; 如 <p v-if="isShow">不装了,我摊牌了,没错你要找的就是我</p> 当...
  • 1.在Vue中监听事件使用v-on指令 v-on 作用:绑定事件监听器 缩写(语法糖):@ (如v-on:click可简写为@click) 当通过methods中定义方法,以供@click调用时,需要注意参数问题: 情况一:如果该方法不需要额外参数,...
  • 场景:当文本超过三行时显示更多按钮,单击“更多”后,文本全部显示,“更多”隐藏 解决: 在“更多”按钮的事件里加上this.$forceUpdate() 强制刷新,此方法会触发update生命周期 ...
  • vue中怎么用判断如果计量单位为*号的话那么他的数量显示0而不是空值

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,726
精华内容 4,290
关键字:

vue v-if 判断显示隐藏