vue 如何根据条件判断属性的添加和去除

目录
  • 根据条件判断属性的添加和去除
    • 解决方法
  • Vue 的条件判断语句
    • v-if
    • v-else
    • v-else-if
    • v-show
    • v-if 与 v-show 的区别

根据条件判断属性的添加和去除

写一个列表,然后想要在查询数据的过程中添加loading样式,这个时候需要添加一个loading属性,但是添加之后会有直接展示loading。

解决方法

:loading = isLoading

在下面需要注册isLoading为boolean类型,如下:

isLoading:false/true

然后在开始查询的时候改为false,查询结果出来之后改为false

this.isLoading = true
this.isLoading = false

Vue 的条件判断语句

v-if

条件判断用 v-if 指令

代码示例:在元素中使用 v-if 指令

<div id="app">
    <input type="button" value='toggle' @click='flag=!flag'>
    <h3 v-if='flag'>v-if directive</h3>
</div>
var vm = new Vue({
    el:'#app',
    data:{
       flag:true
    },
    methods:{}
});

这里, v-if 指令将根据表达式 flag 的值 (true 或 false ) 来决定是否插入 h3 元素。

v-else

可以用 v-else 指令给 v-if 添加一个 “else” 块

代码示例:在元素中使用 v-if , v-else 指令

<div id="app">
    <h3 v-if='flag'>Yes</h3>    
    <h3 v-else='flag'>No</h3>
</div>
var vm = new Vue({
    el:'#app',
    data:{
       flag:true
    },
    methods:{}
});

这里, v-if,v-else 指令将根据表达式 flag 的值 (true 或 false ) 来决定是否插入 h3 元素以及元素中的值。

v-else-if

v-else-if 在 2.1.0 新增,用作 v-if 的 else-if 块。可以链式的多次使用

代码示例:在元素中使用 v-if , v-else, v-else-if 指令

<div id="app">
    <h3 v-if='star==="Jackson"'>Jackson</h3>    
    <h3 v-else-if='star==="Lay"'>Lay</h3>    
    <h3 v-else='star==="Yang"'>Yang</h3>
</div>
var vm = new Vue({
    el:'#app',
    data:{
       star:Jackson
    },
    methods:{}
});

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show

v-show 跟 v-if 的效果差不多;但本质有很大的区别。

代码示例:v-if 与 v-show 的区别

    <div id="app">
        <input type="button" value='toggle' @click='toggle'>
        <!-- 一般来说,v-if 有更高的切换消耗,而 v-show 有更高的初始渲染消耗。
        因此,如果需要频繁切换:用 v-show 较好;如果在运行时条件不大可能改变:
        用 v-if 较好 -->
        <h3 v-if='flag'>v-if directive</h3>
        <h3 v-show='flag'>v-show directive</h3>
    </div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            flag:true
        },
        methods:{
            toggle(){
                this.flag =! this.flag;
            }
        }
    });
</script>

v-if 与 v-show 的区别

区别一:

  • v-if 是动态添加,当值为 false时,是完全移除该元素,即 DOM 不存在;
  • v-show 仅隐藏 / 显示,值为 false 时,该元素依旧存在于 DOM,若其原样式设 display:none 则会导致其无法正常显示

区别二:

  • v-if 有较高的切换性能消耗
  • v-show 有较高的初始渲染消耗

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue实现条件判断动态绑定样式的方法

    在我们做前端页面的时候,为了美观和直观,我们希望通过条件判断来让页面显示不同的样式,如下图所示: 当值为"是"时,显示绿色的标签,当值为"否"时,显示为灰色的标签. 标签的样式分别为: <el-tag type="success">绿色标签</el-tag> <el-tag type="info">灰色标签</el-tag> 关键在于type的样式部分,我们利用vue的样式绑定,

  • Vue条件循环判断+计算属性+绑定样式v-bind的实例

    Vue.js条件与循环 1.条件判断 (1)v-if, <div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> </template> </div> <script> new Vue({ el:'#app', data:{ seen:true,

  • VUE中V-IF条件判断改变元素的样式操作

    方法一 v-if判断后用标签改变样式(特定显示列字体加粗) <v-list dense> <template v-for="(col,i) in cols"> <v-list-item :key="i" v-if="col.text=='商品码'||col.text=='通用名称'"> <v-list-item-content><b>{{col.text}}</b></

  • vue 如何根据条件判断属性的添加和去除

    目录 根据条件判断属性的添加和去除 解决方法 Vue 的条件判断语句 v-if v-else v-else-if v-show v-if 与 v-show 的区别 根据条件判断属性的添加和去除 写一个列表,然后想要在查询数据的过程中添加loading样式,这个时候需要添加一个loading属性,但是添加之后会有直接展示loading. 解决方法 :loading = isLoading 在下面需要注册isLoading为boolean类型,如下: isLoading:false/true 然后在

  • vue如何根据条件判断按钮是否可以点击

    目录 根据条件判断按钮是否可以点击 方法一:使用v-if .v-else 来判断 方法二:增加一个变量,判断 vue判断点击当前元素 需要判断你是点击了遮罩层还是form表单 接下来是分别对e.currentTarget.e.target打印 根据条件判断按钮是否可以点击 按钮当在特定环境下不可点击,需要根据判断来控制点击事件. 方法一:使用v-if .v-else 来判断 <template>     <div>         <el-button v-if="

  • vue将对象新增的属性添加到检测序列的方法

    vue中将对象中新增的属性增加到检测序列中 deepCopy(o1, o2) { // 将o2的内容拷贝给data中的o1 var key, i if (o2 instanceof Array) { for (i = 0; i < o2.length; i++) { if (o2[i] instanceof Array) { this.$set(o1, i, []) this.deepCopy(o1[i], o2[i]) } else if (o2[i] instanceof Object) {

  • Vue 根据条件判断van-tab的显示方式

    我就废话不多说了,大家还是直接看代码吧~ .vue <van-tabs v-model="activeTab"> <van-tab title="XXX" v-if="isShow"></van-tab> <van-tab title="XXX"></van-tab> </van-tabs> .ts private activeTab = 0; priva

  • vue三元运算之多重条件判断方式(多个枚举值转译)

    目录 vue多重条件判断(多个枚举值转译) vue标签中使用三元运算符 vue多重条件判断(多个枚举值转译) 直接上代码: div class="msgLi">      <p>组织设置:</p>      <p>{{ organInfo.partySetup=="1"?"撤销":organInfo.partySetup=="2"?"调整":organInfo.pa

  • vue.js实现条件渲染的实例代码

    一.初探条件渲染 vue 的条件渲染,仍旧依赖于指令系统,下面逐个介绍: (1)v-if <div id="app"> <div v-if="c1">c1</div> </div> ...... var app = new Vue({ el: '#app', data: { c1: false } }); 当 c1 为真值的时候,渲染出 v-if 所绑定的元素,否则不渲染出该元素.渲染结果如下: <div id=

  • VUE饿了么树形控件添加增删改功能的示例代码

    本文介绍了VUE饿了么树形控件添加增删改功能的示例代码,分享给大家,具体如下: element-ui树形控件:地址 在原文档中有个案例是有新增和删除功能,但是后来发现其修改的数据并不能直接影响到树形数据,所以采用了 render-content 的API重新写了个组件. 写个开发的步骤,所以文章比较长emmm 大致效果如图: 1.省市API 在网上复制了个省市的list,有两个属性是新增的 isEdit :控制编辑状态 maxexpandId :为现下id的最大值 export default{

  • 用Vue.js实现监听属性的变化

    前言 创建 Vue 实例时,Vue 将遍历 data 的属性,通过 ES5 的 Object.defineProperty 将它们转为 getter/setter,在其内部 Vue 可以追踪依赖.通知变化. const vm = new Vue({ data: {foo: 1} // 'vm.foo' (在内部,同 'this.foo') 是响应的 }) 观察属性变化 Vue 的实例提供了 $watch 方法,用于观察属性变化. const vm = new Vue({ data: {foo:

随机推荐