06条件判断

条件判断

v-if的原理：
v-if后面的条件为false时,对应的元素以及其子元素不会渲染。
也就是根本没有不会有对应的标签出现在DOM中。

<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>

  <h1>{{result}}</h1>

  <h2 v-if="isShow">{{massage}}</h2>
  <h1 v-else>当isShow为false时显示我</h1>

</div>

<body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        massage: "你好",
        isShow: true,
        score: 99
      },
      computed: {
        result() {
          let showMessage = '';
          if (this.score >= 90) {
            showMessage = "优秀"
          } else if (this.score >= 80) {
            showMessage = "良好"
          }
          // ...
          return showMessage
        }
      }
    })
  </script>
</body>

用户切换的小案例

<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="emailname">用户邮箱</label>
    <input type="text" id="emailname" placeholder="用户邮箱" key='emailname'>
  </span>
  <button @click="isUser = !isUser">切换类型</button>
</div>

<body>
	<script src="../js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				isUser:true
			}
		})
	</script>
</body>

小问题:

如果我们在有输入内容的情况下,切换了类型,我们会发现文字依然显示之前的输入的内容。
但是按道理讲,我们应该切换到另外一个input元素中了。
在另一个input元素中,我们并没有输入内容。
为什么会出现这个问题呢?

问题解答:

这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素。
在上面的案例中, Vue内部会发现原来的input元素不再使用,直接作为else中的input来使用了

解决方案:

如果我们不希望Vue出现类似重复利用的问题,可以给对应的input添加key
并且我们需要保证key的不同

Virtual DOM 是什么？

avatar

Virtual DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。

简单来说，可以把Virtual DOM 理解为一个简单的JS对象，并且最少包含标签名( tag)、属性(attrs)和子元素对象( children)三个属性。不同的框架对这三个属性的命名会有点差别。

对于虚拟DOM，咱们来看一个简单的实例，就是下图所示的这个，详细的阐述了模板 → 渲染函数 → 虚拟DOM树 → 真实DOM的一个过程
avatar

Virtual DOM 作用是什么？

虚拟DOM的最终目标是将虚拟节点渲染到视图上 但是如果直接使用虚拟节点覆盖旧节点的话，会有很多不必要的DOM操作。例如，一个ul标签下很多个li标签，其中只有一个li有变化，这种情况下如果使用新的ul去替代旧的ul,因为这些不必要的DOM操作而造成了性能上的浪费。

为了避免不必要的DOM操作，虚拟DOM在虚拟节点映射到视图的过程中，将虚拟节点与上一次渲染视图所使用的旧虚拟节点（oldVnode）做对比，找出真正需要更新的节点来进行DOM操作，从而避免操作其他无需改动的DOM。

其实虚拟DOM在Vue.js主要做了两件事:

提供与真实DOM节点所对应的虚拟节点vnode
将虚拟节点vnode和旧虚拟节点oldVnode进行对比，然后更新视图

v-if和v-show的区别

v-show控制的是节点的display属性 v-if是将节点删除了 如果节点需要频繁显示隐藏 使用v-show性能更佳！

<div id="app">
  <!-- v-if: 当条件为false时，包含v-if指令的元素，根本就不会存在dom中 -->
  <h2 v-if='isShow' id="aaa">{{massage}}</h2>
  <!-- V- show:当条件为false时，v-show只是给我们的元素添加一个行内样式: display: none -->
  <h2 v-show='isShow' id="bbb">{{massage}}</h2>
</div>

<body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        massage: "你好",
        isShow: true
      }
    })
  </script>
</body>
posted @ 2021-11-08 22:47  天亮說晚安  阅读(28)  评论(0)    收藏  举报