vue 图片不显示 if else_（Vue基础）7.Vue中的条件渲染:v-if(else)/v-show/v-if+key值

最新推荐文章于 2024-06-27 13:54:12 发布

赵子诺

最新推荐文章于 2024-06-27 13:54:12 发布

阅读量625

点赞数

文章标签： vue 图片不显示 if else

本文链接：https://blog.csdn.net/weixin_42514750/article/details/113323569

版权

最近因为工作较忙，其实已经写好了，差点忘了更新了。基础的已经更新完了。我自己也需要时常拿出来回顾一下，记得跟文档一起来看。

关键词：v-if 和v-show(性能更好) 、 v-if （v-else-if） v-else(二者之间不能有其他dom元素标签阻隔) 、v-if+key值

v-if 在实例中所返回的值的 true or false 决定是被否真实地挂载在真实的页面之上

一、v-if （v-show）

v-if="xxx" 后接的JS表达式。实例中data所返回的值:是或否(true or false)，决定页面dom元素标签是否被真实地挂载在页面上

<body>
  <div id="app">
    <div v-if="show">{{message}}</div>
  </div>
  <script>
    var vm = new Vue({
     el: "#app",
     data: {
       show: true,  //show: false
       message: "miya wang"
     }
   })
  </script>
</body>

v-if & v-show 对比
相同：都能够控制一个模板标签在页面上显示区别：当vue实例中data中show的值如果为false，两种条件渲染在页面上均是：没有内容展示

但是控制台结果却不一样：v-if 直接展示 说明不存在于dom上; v-show 显示已经被渲染至页面上，对应dom元素标签依然在页面存在，只是以 display:none; 形式告知

性能上： v-show 性能更好，不会频繁地将dom从页面上删除或添加

v-if 则是每次显示/隐藏，都是删除dom或增加dom

<body>
  <div id="app">
    <div v-if="show">{{message}}</div>
    <div v-show="show">{{message}}</div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
	show: false,  //show: false
	message: "miya wang"
       }
     })
  </script>
</body>

二、v-if 更复杂的使用

1、利用if... else

<div v-if="show">{{message}}</div>
<div v-else>Bye Bye miya wang</div>

注意：二者要紧贴使用，不能中间插入任何dom元素标签分隔

<body>
  <div id="app">
    <div v-if="show">{{message}}</div>
    <div v-else>Bye Bye miya wang</div>
  </div>
  <script>
    var vm = new Vue({
     el: "#app",
     data: {
      show: false,  //show: false
      message: "miya wang"
     }
    })
  </script>
</body>

2、利用if...else if...else

<div v-if="show === 'a'">This is a</div>
<div v-else-if="show === 'b'">This is b</div>
<div v-else>This is others</div>

<body>
  <div id="app">
   <div v-if="show === 'a'">This is a</div>
   <div v-else-if="show === 'b'">This is b</div>
   <div v-else>This is others</div>
  </div>
  <script>
   var vm = new Vue({
     el: "#app",
     data: {
       show: "a"
     }
   })
  </script>
</body>

试一下吧：

三、v-if 渲染页面时复用标签需清空上一次使用过的内容+key值

<div v-if="show">
用户名：<input key="username"/>
</div>
<div v-else >
邮箱：<input key="mailname"/>
</div>

现象：Vue渲染页面时，会尝试复用页面上已存在的dom。复用input标签，会将上一个使用过的内容再次复用到下一次。（用下列代码试一下出现的复用上一次内容的现象）

<body>
  <div id="app">
    <div v-if="show">
      用户名：<input key="username"/>
    </div>
    <div v-else >
     邮箱：<input key="mailname"/>
    </div>
  </div>
  <script>
   var vm = new Vue({
     el: "#app",
     data: {
	show: false 
     }
   })
  </script>
</body>

问题：如何复用标签时，还能清空input内容？解决：当你给某个元素标签加上一个key值，vue则知道这个key值是页面中唯一的元素。且多个key值的内容不一样，vue就不会复用以前的标签。（vue中虚拟dom，diff算法中知识点）

试一下吧：在后台尝试修改一下 vm.show= true 上一次被使用的内容就已经消失

赵子诺

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 图片不显示 if else_（Vue基础）7.Vue中的条件渲染:v-if(else)/v-show/v-if+key值

最近因为工作较忙，其实已经写好了，差点忘了更新了。基础的已经更新完了。我自己也需要时常拿出来回顾一下，记得跟文档一起来看。关键词：v-if 和v-show(性能更好) 、 v-if （v-else-if） v-else(二者之间不能有其他dom元素标签阻隔) 、v-if+key值v-if 在实例中所返回的值的 true or false 决定是被否真实地挂载在真实的页面之上一、v-if ...
复制链接

扫一扫