v-if 和 v-show

在vue中，v-if 和 v-show 会根据接收 true/false 信息使得页面上元素达到显示或隐藏的效果。

语法：

<标签 v-if="true/false"></标签>

<标签 v-show="true/false"></标签>

<!--true:显示   false:隐藏-->
  • 1
  • 2
  • 3
  • 4
  • 5

原理：

  • v-if：通过 创建、销毁 dom元素的方式达到显示、隐藏效果(销毁后有一个占位符 )。

  • v-show：通过css控制样式style达成显示、隐藏效果。

    • display:none; 隐藏
    • display:block; 显示

特点：

v-if 有更高的切换消耗 ，如果运行条件不大可能改变，则v-if 较合适。

v-show有更高的渲染消耗，如果需要频繁切换，则v-show 较合适。

注意：

v-if使得元素被隐藏后，这个元素的物理位置有一个名称为<!---->的占位符，其与html的注释信息没有关系。

案例：

通过按钮控制，使得元素内容在显示和隐藏之间切换：

<style>
    #one{width: 300px;height: 40px;background-color:orange;}
    #two{width: 300px;height: 40px;background-color:lightgreen;}
</style>
</head>
<body>
    <div id="app">
        <h2>v-if和v-show</h2>
        <button @click="flag=!flag">切换</button>
        <p id="one" v-if="flag">vue指令--v-if</p>
        <p id="two" v-show="flag">vue指令--v-show</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                flag:false // 控制标签是否显示true/false
            },
        });
    </script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

注意：

​ 事件驱动不仅可以是methods方法，也可以是简单的js语句。

v-if 和 v-else

在Vue中，v-if 、v-else-if 和 v-else 三个指令结合可以实现多路分支结构。

  • v-if 可以单独使用，形成单路分支结构。
  • v-if 和 v-else 可以合作使用，实现双路分支结构。
  • v-if 、v-else-if 和 v-else 可以合作使用，实现多路分支结构。

语法：

<标签 v-if="true/false"></标签>

<标签 v-else-if="true/false"></标签>

<标签 v-else-if="true/false"></标签>

<标签 v-else></标签>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

注意：

​ 以上4个标签分支结构，最终只会走一个，第一个为true的那个标签会执行 或 执行v-else。

案例应用：

判断品牌信息是否存在，并显示对应内容

<table v-if="brandList.length>0">
  ……
</table>
<table v-else>
  <tr><td>没有任何记录！</td></tr>
</table>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

注意：

​ v-if 和v-else 一并使用，页面没有<!---->占位符了。

# elementui
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign