vue|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 = truethis.isLoading = false


Vue 的条件判断语句
v-if
条件判断用 v-if 指令
代码示例:在元素中使用 v-if 指令
v-if directive

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 指令
Yes
No

var vm = new Vue({el:'#app',data:{flag:true},methods:{}});

【vue|vue 如何根据条件判断属性的添加和去除】这里, 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 指令
Jackson
Lay
Yang

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 的区别
v-if directive
v-show directive



v-if 与 v-show 的区别
区别一:
  • v-if 是动态添加,当值为 false时,是完全移除该元素,即 DOM 不存在;
  • v-show 仅隐藏 / 显示,值为 false 时,该元素依旧存在于 DOM,若其原样式设 display:none 则会导致其无法正常显示
区别二:
  • v-if 有较高的切换性能消耗
  • v-show 有较高的初始渲染消耗
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

    推荐阅读