十日谈 : Vue的条件渲染案例

最新推荐文章于 2023-02-28 09:33:44 发布

扔猿太膻

最新推荐文章于 2023-02-28 09:33:44 发布

阅读量188

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_36013952/article/details/104453829

版权

前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

十日谈 : Vue的条件渲染案例

欢迎阅读我的Vue学习日记

欢迎阅读我的Vue学习日记

登录切换的小案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="请输入用户账号">
  </span>
  <span v-else>
    <label for="email">用户邮箱</label>
    <input type="text" id="email" placeholder="请输入邮箱">
  </span>
  <button @click="isUser = !isUser">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      isUser : true
    }
  })
</script>
</body>
</html>

单击切换类型来实现账户输入和邮箱输入
演示结果:
在这里插入图片描述

Vue的虚拟DOM复用问题

我们发现,在input里面输入123,再切换类型之后,123仍然在input里面,这说明Vue内部为了效率的提升是支持模块复用的,那我们该如何解决这个问题呢.
使用key来单独的标识一个模块

<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="请输入用户账号" key="username">
  </span>
  <span v-else>
    <label for="email">用户邮箱</label>
    <input type="text" id="email" placeholder="请输入邮箱" key="email">
  </span>
  <button @click="isUser = !isUser">切换类型</button>
</div>

v-show

v-show与v-if相似,也决定一个元素是否渲染

v-if和v-show的区别:
1.v-if当条件为false时,压根不会有对应的元素出现在DOM中
而v-show当条件为false时,仅仅是将元素的display属性设置为none而已.
2.当需要显示与隐藏之间切片很频繁的时候,使用v-show
当只有一次切换时使用v-if

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2 v-show="isShow">
    {{message}}
  </h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'Hello Vue',
      isShow:true,
    }
  })
</script>
</body>
</html>

在这里插入图片描述
isShow改为false时,message的内容消失但是

内容并没有在DOM里面消失.,但是增加了style display且变为none

v-for遍历数组

v-for的语法类似于javaScript中的for 循环.
格式如下:item in items的形式

一个简单的案例

1.在遍历过程中不使用索引值:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="item in names">{{item}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'Hello Vue',
      names:['why','kobe','james','curry']
    }
  })
</script>
</body>
</html>

2.在遍历过程中获取下标值

<div id="app">
  <ul>
    <li v-for="(item,index) in names">{{index+1}}.{{item}}</li>
  </ul>
</div>

v-for遍历对象

1.在遍历对象的过程中,如果只是获取一个值,那么获取到的是value值
2.获取 key和 value(value,key)即可
3.获取index索引下标

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="item in info">{{item}}</li>
  </ul>

  <ul>
    <li v-for="(value,key) in info">{{key}}-{{value}}</li>
  </ul>

  <ul>
    <li v-for="(value,key,index) in info">{{index}}-{{key}}-{{value}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      info:{
        name:'why',
        age:18,
        height:1.88
      }
    }
  })
</script>
</body>
</html>

组件的key属性

key的作用主要是为了高效的更新DOM

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="item in letters" :key="item">{{item}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      letters:['A','B','C','D','E'],
    }
  })
</script>
</body>
</html>

在这里插入图片描述

注意,key绑定的元素一定要和item是一一对应的关系,所以绑定item的效果要好于绑定index,index一直在变化,并不能起到提高效率的作用.

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

1.push() 方法可以做的响应式√

<body>
<div id="app">
  <ul>
    <li v-for="item in letters">{{item}}</li>
  </ul>
  <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      letters:['a','b','c','d'],
    },
    methods:{
      btnClick(){
        //push
        this.letters.push('aaa')
      }
    }
  })
</script>
</body>

2.通过索引值修改数组中的元素无法做的响应式 ×
3.pop()方法可以做到响应式√
4.shift()方法可以做到响应式√
5.unshift()方法可以做的响应式√
6.splice()的作用:删除元素\插入元素\替换元素,可以做到响应式√
splice()第一个参数表示要长第几个数开始操作.
删除元素:第二个参数传入你要删除几个元素(如果没有传,就删除后面所有元素)
替换元素:第二个参数,表示我们要替换几个元素,后面是用于替换前面的元素.
插入元素:第二个参数,传入0,并且后面跟上要插入的元素.
7.sort()方法也是响应式的√
8.reverse()方法也是响应式的√

扔猿太膻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十日谈 : Vue的条件渲染案例

十日谈 : Vue的条件渲染案例欢迎阅读我的Vue学习日记登录切换的小案例欢迎阅读我的Vue学习日记登录切换的小案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head>&...
复制链接

扫一扫