vuejs学习2.3 vue语法——v-if，v-else，v-else-if，v-show，v-for

最新推荐文章于 2023-10-23 16:39:28 发布

to-and-fro

最新推荐文章于 2023-10-23 16:39:28 发布

阅读量804

点赞数

分类专栏： vuejs 文章标签： vue

本文链接：https://blog.csdn.net/qq_39225271/article/details/107922356

版权

vuejs 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

vue语法

v-if
v-else
v-else-if
- 用户登陆切换
v-show
v-for
数组的哪些方法是响应式的

v-if

v-if后面的条件为true，对应的子元素及其子元素才会被渲染

<body>
<div id="app">
  <h2 v-if="true">{{message}}</h2>
  <h2 v-if="false">{{message}}</h2>
  <h2 v-if="isShow">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好",
      isShow:true,
    }
  })
</script>
</body>

结果中只能显示两个“你好”，因为第二个后为false，元素不会进行渲染

v-else

与v-if进行联用，如果v-if后值为false，则显示v-else元素

<body>
<div id="app">
  <h2 v-if="isShow">{{message}}</h2>
  <h2 v-else>显示区域为else</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好",
      isShow:false,
    }
  })
</script>
</body>

v-else-if

与v-if，v-else联用，类似于Java中的else if，只有当为true时才能被渲染

<body>
<div id="app">
  <h2 v-if="score>90">优秀</h2>
  <h2 v-else-if="score>80">良好</h2>
  <h2 v-else-if="score>60">及格</h2>
  <h2 v-else>不及格</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好",
      score:56
    }
  })
</script>
</body>

用户登陆切换

<body>
<div id="app">
  <span v-if="loginStatus">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="用户账号" >
  </span>
  <span v-else>
    <label for="userEmail">用户邮箱</label>
    <input type="text" id="userEmail" placeholder="用户邮箱">
  </span>
  <button @click="loginStatus=!loginStatus">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好",
      loginStatus:true,
    }
  })
</script>
</body>

在这里插入图片描述
如果按照上面代码可以实现登陆方式切换，但是如果在用户邮箱输入123，切换类型后进入用户账号123不会消失，这是因为vue在进行DOM渲染时，处于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素，所以案例中vue发现原来的input元素不再使用，直接作为else的input来使用了。解决的方法：在input元素中添加key属性并且保证key不相同，例如：

<input type="text" id="username" placeholder="用户账号" key="1">
<input type="text" id="userEmail" placeholder="用户邮箱" key="2">

从而解决了复用问题

v-show

v-show为false时在DOM中依然存在，只是display：none

<h2 v-show="true">{{message}}</h2>

v-for

对于数组或者对象进行循环遍历

遍历数

<li v-for="count in 5">{{count}}</li>

在这里插入图片描述

遍历数组

v-for=“item in name”，name表示数组名，item表示数组每个值，也可以通过index获取下标，获取两个值需要用括号来实现
v-for="(item,index) in name"

<body>
<div id="app">
  //不加下标
  <ul>
    <li v-for="item in name">{{item}}</li>
  </ul>
  //加下标
  <ul>
    <li v-for="(item,index) in name">{{index+1}}.{{item}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      name:["why","how","what"]
    }
  })
</script>
</body>

运行结果如下：
在这里插入图片描述

遍历对象

v-for="(item,key,index) in info"，item表示每个对象的值，key表示每个对象的key，index表示下标，根据需要进行获取

<body>
<div id="app">
  //在遍历对象过程中如果只是选择一个值，那么获取到的时value
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>
  //获取key和value
  <ul>
    <li v-for="(item,key) in info">{{key}}:{{item}}</li>
  </ul>
  //获取key，value，index
  <ul>
    <li v-for="(item,key,index) in info">{{index}},{{key}}:{{item}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      info:{
        name:"kobe",
        age:15,
        height:200
      }
    }
  })
</script>
</body>

运行结果如下：
在这里插入图片描述

数组的哪些方法是响应式的

由于vue是响应式的，当数据改变时，视图会发发生对应的更新

非响应式

btnCLick(){
this.name[0]=“aaa”;
}
这种方法对数组进行修改不是响应式，数组数据修改，视图不会改变

响应式

push

在数组尾部添加元素
this.name.push(‘aaa’);
this.name.push(‘aaa’，‘bbb’);添加后为……，aaa，bbb

pop

删除数组最后的元素

shift

删除数组头部的元素

unshift

在数组头部添加元素
this.name.unshift(‘aaa’);
this.name.unshift(‘aaa’,‘bbb’,‘ccc’);添加后为aaa，bbb，ccc，……

splice

splice，插入元素，删除元素，替换元素
删除元素:splice(start,删除元素的个数），第二个参数如果不传表示删除之后所有元素
插入元素：splice(start,0,插入的元素逗号分隔）
替换元素：splice(start,替换元素的个数，替换的元素依次列出来逗号分隔）

sort

对数组进行排序
sort()排序,括号可以传递参数，参数为函数

reverse

对数组进行反序

to-and-fro

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuejs学习2.3 vue语法——v-if，v-else，v-else-if，v-show，v-for

vue语法v-ifv-elsev-else-if用户登陆切换v-showv-for遍历数组遍历对象数组的哪些方法是响应式的非响应式响应式pushpopshiftunshiftsplicesortreversev-ifv-if后面的条件为true，对应的子元素及其子元素才会被渲染<body><div id="app"> <h2 v-if="true">{{message}}</h2> <h2 v-if="false">{{messag
复制链接

扫一扫