vue知识小结

一、v-if和v-show的区别

相同点：v-if与v-show均可以动态控制dom元素显示隐藏
不一样点：v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。实例以下：

<template>
  <div id="app">
    <div v-if="ifshow">我是v-if组件</div>
    <div v-show="show">我是v-show组件</div>
  </div> 
</template>
<script>
export default {
  data() {
    return {
      show:false,
      ifshow:false
    }
  },
}
</script>
复制代码

运行结果固然是空白页，由于v-if和v-show都让他们隐藏了元素 可是打开浏览器元素界面会看到下图

咱们看到了 我是V-show元素的内容 它的样式是display:none;可是看不到v-if元素

2. v-on 和v-bind的区别

一、v-on能够简写成@ 而v-bind能够简写成：
二、v-bind通常用来动态更新HTML元素上的属性，如id，class，href，src等，v-on通常用来绑定html事件，经常使用的事件修饰符有.stop .prevent .capture .self .once .passive等

3.v-for和v-if 的优先级

v-for比v-if优先，若是每一次都须要遍历整个数组，将会影响速度，尤为是当之须要渲染很小一部分的时候。因此咱们通常状况下须要这样作： 通常咱们在两种常见的状况下会倾向于这样作： 一、永远不要把 v-if 和 v-for 同时用在同一个元素上。
二、为了过滤一个列表中的项目 (好比 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users替换为一个计算属性 (好比 activeUsers)，让其返回过滤后的列表。
三、为了不渲染本应该被隐藏的列表 (好比 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (好比 ul, ol)。