vue.js基础知识-CSDN博客

本文链接：https://blog.csdn.net/s8459/article/details/126955392

v-if与v-show的区别：

v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

另一个用于根据条件展示元素的选项是v-show指令。用法大致一样：不同的是带有v-show的元素始终会被渲染并保留在 DOM 中。

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

代码展示：

<body>
<!-- V-show和v-if都可以用来控制标签的显示与隐藏
<标签V-show='布尔值'></标签>
<标签v-1f='布尔值'></标签>
当布尔值为true,他们就显示；当布尔值为false,他们就隐藏 -->
    <div id="app">
        <div v-if="display"> 我是由v-if控制的 </div>
        <div v-show="display"> 我是由v-show控制的 </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                display:true  //我是由v-if控制的
                             // 我是由v-show控制的

                // display:false //布尔值 false：将会隐藏
            }
        })
    </script>
    <!-- 【v-show】
    1.本质就是标签display设置为none,控制隐藏。只是基于cS5进行切换
    2.V-show有更高的初始渲染消耗
    3.V-show适合频繁切换的情况
    【v-if】
    1.动态的向D0M树内添加或者删除DOM元素
    2.v-1f有更高的切换消耗。
    3.v-1f适合运行条件很少改变的情况 -->
</body>

v-if的使用：

v-if

语法：v-if=‘表达式’

作用：根据表达式的真假切换元素的显示状态

v-else

v-else语法和javascript的else一致，必须配合v-if配合使用，不能和show一起使用

v-else-if

语法：v-else-if=‘表达式’

 <div id="app">
        <h3>期末成绩奖励相关安排</h3>
        <div v-if="score >= 600"> 全班一起去旅游 </div>
        <div v-else-if="score >= 550"> 全班一起看电影 </div>
        <div v-else-if="score >= 300"> 奖励作业真题一套 </div>
        <div v-else-if="score >=80">一起回家种田</div>
        <div v-else>叫家长明天来一趟办公室</div>
        </div>
        <script src="./vue.js"></script>

        <script>
        new Vue({
        el:'#app',
        data:{
            score: 450
            } 
        })
        </script>
         <!-- 得到结果：期末成绩奖励相关安排
              奖励作业真题一套 -->