精华内容
下载资源
问答
  • Vue 条件渲染指令

    千次阅读 2018-07-19 01:30:37
    和JavaScript的条件语句一样,vue条件指令可以根据表达式的值在dom中渲染或者销毁元素/组件,常用的条件指令有: v-if v-else-if v-else 其中v-if可以单独使用,v-else-if必须紧跟v-if,v-else必须紧跟v-else-...

    和JavaScript的条件语句一样,vue的条件指令可以根据表达式的值在dom中渲染或者销毁元素/组件,常用的条件指令有:

    • v-if
    • v-else-if
    • v-else

    其中v-if可以单独使用,v-else-if必须紧跟v-if,v-else必须紧跟v-else-if或者v-if。当表达式的值为true时,当前元素/组件及所有的子节点都将会被渲染,反之被移除。

    如果一次判断的是多个元素或组件,那么可以在元素上使用条件指令,最终渲染的结果不会包含该元素。

    让我们看个实例:

    <!--条件渲染指令示例-->
    <template>
      <div>
        <template v-if="inputType === 'name'">
          <label>用户名:</label>
          <input placeholder="请输入用户名"/>
        </template>
        <template v-else-if="inputType === 'mail'">
          <label>邮箱:</label>
          <input placeholder="请输入邮箱"/>
        </template>
        <template v-else>
          <label>手机号码:</label>
          <input placeholder="请输入手机号码"/>
        </template>
        <button @click="changeInputType">切换输入类型</button>
      </div>
    </template>
    
    <script>
      export default {
        name: "ConditionalRender",
        data() {
          return {
            inputType: 'name'
          }
        },
        methods: {
          changeInputType: function () {
            if (this.inputType === 'name') {
              this.inputType = 'mail';
            }
            else if (this.inputType === 'mail') {
              this.inputType = 'phone';
            }
            else {
              this.inputType = 'name';
            }
    
          }
        }
      }
    </script>
    
    <style scoped>
      label {
        font-weight: bold;
      }
    
      button {
        margin-left: 10px;
      }
    </style>
    

    运行程序:
    这里写图片描述

    然后,我们点击按钮进行切换:
    这里写图片描述
    这里写图片描述

    我们试着在输入框内输入内容,进行切换:
    这里写图片描述
    切换后:
    这里写图片描述

    我们可以发现,输入框的内容没有发生变化,还是我们刚开始输入的姓名。按照我们的猜测,切换后,输入框应该是对应的placeholder内容。

    这里设计到vue的渲染机制,在渲染元素的时候,vue出于效率的考虑,会尽可能的复用已有的元素而非重新进行渲染,所以我们就会发现上面的现象,也就是说input元素被复用了。

    那么,如果我们不希望vue复用这些元素,我们可以使用vue提供的key属性,它可以让我们自己决定是否复用元素,注意一点:key值必须是唯一的。

    我们修改上面的代码,为input元素添加key属性:

    <template v-if="inputType === 'name'">
          <label>用户名:</label>
          <input placeholder="请输入用户名" key="name-input"/>
        </template>
        <template v-else-if="inputType === 'mail'">
          <label>邮箱:</label>
          <input placeholder="请输入邮箱" key="mail-input"/>
        </template>
        <template v-else>
          <label>手机号码:</label>
          <input placeholder="请输入手机号码" key="phone-input"/>
        </template>

    运行程序:
    这里写图片描述
    切换:
    这里写图片描述

    好了,是不是和我们要求的一样了呢。

    另外要提的是v-show指令,该指令是改变元素的css属性display。当v-show为true时,元素会显示,为false时,元素会隐藏,dom结构中会给元素加上内联样式:display:none;.

    示例:

    <label v-show="true">我是v-show=true</label>
    <label v-show="false">我是v-show=false</label>

    运行程序:
    这里写图片描述

    我们查看下dom结构:
    这里写图片描述

    大家可以看到,确实和我们上面说的一样,当v-show值为false的时候,添加了display:none;的内联样式。

    那么v-if和v-show两者都具有类似的功能,我们到底该选择使用哪个呢?

    v-show只是简单的css属性切换,无论其值如何,都会被编译,相比v-show,v-if只有在条件第一次变为真的时候才开始编译。

    v-if更适合条件不经常改变的场景,应为通过v-if进行切换开销比较大,当你要频繁进行显示隐藏的切换时显然v-show更加适合。

    展开全文
  • vue条件渲染指令

    2020-07-25 20:42:52
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>条件渲染</title> </head> <body> <div id="demo"> 表白成功</p> 表白失败</p> <hr> 求婚成功</p> !ok">求婚失败</p> !ok">切换</button>...

    v-if,v-else,v-show
    v-if和v-else,当v-if为真时,v-if创建,v-else移除,当v-if为假时,v-if移除,v-else创建
    当v-show为真时,v-show显示,当v-show为假时,v-show隐藏

    v-if、v-else和v-show区别

    v-if、v-else是两个中一个创建、一个移除,而v-show的属性值为假时隐藏,为真时显示,区别就是v-show为假是存在但不显示,而v-if、v-else一个存在并显示,一个不存在。当进行频繁的切换操作时,选择v-show

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>条件渲染</title>
    </head>
    <body>
    
    <div id="demo">
      <p v-if="ok">表白成功</p>
      <p v-else>表白失败</p>
    
      <hr>
      <p v-show="ok">求婚成功</p>
      <p v-show="!ok">求婚失败</p>
    
      <button @click="ok=!ok">切换</button>
    </div>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#demo',
        data: {
          ok: true
        }
      })
    </script>
    </body>
    </html>
    
    展开全文
  • vue条件渲染指令if/show

    2020-11-24 06:39:27
    条件渲染指令 一: v-if/ v-else/ v-else-if 二: v-show 三: 两者区别 v-if通过真实创建和删除dom来操作 v-show通过css隐藏属性来切换 <template> <div> <h1>IfAndShow</h1> <p>...

    条件渲染指令
    一:
    v-if/
    v-else/
    v-else-if
    二:
    v-show
    三:
    两者区别
    v-if通过真实创建和删除dom来操作
    v-show通过css隐藏属性来切换

    官方给出的:
    v-if vs v-show

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

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

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

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

    <template>
      <div>
        <h1>IfAndShow</h1>
        <p>数据绑定默认为是</p>
        <div v-if="one"></div>
        <div v-else></div>
        <p>添加了切换相反事件的(布尔类型)[@click="one =! one"]</p>
        <button @click="one = !one">相反</button>
        <br />
        <div v-show="one"></div>
        <div v-show="!one"></div>
        <button @click="one = !one">相反</button>
      </div>
    </template>
    
    <script scoped>
    export default {
      name: "IfAndShow",
      data() {
        return {
          one: true,
        };
      },
    };
    </script>
    
    <style scoped>
    </style>
    
    展开全文
  • Vue条件渲染指令v-show、v-if、v-else&v-else-if1、v-show2、v-if3、v-else&v-else-if 1、v-show 作用:通过判断,是否显示该内容。如果值为true,则显示,否则就隐藏。 语法:v-show=”判断表达式” 特点...

    Vue条件渲染指令v-show、v-if、v-else&v-else-if


    1、v-show

    作用:通过判断,是否显示该内容。如果值为true,则显示,否则就隐藏。
    语法:v-show=”判断表达式”
    特点:元素会始终渲染在DOM中,只是被设置了display:none;

    <div id="app">
            <h1 v-show="isshow">isshow为true时,我才会显示</h1>
        </div>
        <script src="./Vuejs/vue2-6-12.js"></script>
        <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   isshow:true
               }
           })
        </script>
    

    在这里插入图片描述

    2、v-if

    作用:判断是否加载固定的内容,如果为真,就加载,否则不加载。
    语法:v-if=”判断表达式”
    特点:控制元素插入或删除,而不是隐藏(v-show)

     <div id="app">
            <h1 v-if="isshow">isshow为true时,我才会显示</h1>
        </div>
        <script src="./Vuejs/vue2-6-12.js"></script>
        <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   isshow:false
               }
           })
        </script>
    

    在这里插入图片描述

    通过实例,我们发现使用v-if且值为false时,那么对应的dom也会被删除,而v-show则只是将css修改成display:none。因此v-if 是惰性的,如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件块。v-show则不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。v-if有更高的切换开销,v-show有更高的初始渲染开销,如果需要频繁切换,v-show比较好,如果改变少,则v-if更好。

    3、v-else&v-else-if

    v-else作用:v-else要紧跟在v-if后面,表示v-if条件不成立时执行。
    v-else-if作用:表示多次,在v-if和v-else中间。
    举例:

    <div id="app">
            <input type="text" v-model="age">请输入年龄
            <p v-if="age < 18">未成年</p>
            <p v-else-if=" age <40">青年</p>
        </div>
        <script src="./Vuejs/vue2-6-12.js"></script>
        <script>
           var vm = new Vue({
               el:"#app",
               data:{
                   age:"1",
               }
           })
        </script>
    
    展开全文
  • 条件渲染,即根据一定的条件来判断是否渲染当前页面。 1.v-if <div id="app"> <p v-if="isShow">v-if,isShow为true时</p> </div> <script> const app=new Vue({ el:'#app', //用于...
  • vue条件渲染指令 不可见 (vue-not-visible) Vue directive for conditional rendering (like v-if) element on screen smaller than breakpoints. 屏幕上小于断点的条件渲染(如v-if)元素的Vue指令。 View demo...
  • Vue条件渲染指令

    2018-09-16 14:40:44
    与JS的条件语句类似,Vue条件指令可以根据表达式的值在DOM中渲染或者销毁元素/组件 v-else-if要紧跟v-if,v-else要紧跟v-else-if或者v--if,表达式的值为真时,当前元素/组件以及所有子节点将被渲染,为假时被...
  • vue条件渲染指令

    2019-11-13 12:24:31
    一、条件渲染指令 v-if 与 v-else v-show 二、比较 v-if 与 v-show 如果需要频繁切换 v-show 较好 当条件不成立时, v-if 的所有子节点不会解析(项目中使用) 代码: <div id="demo"> <h2 v-if="ok">...
  • 主要介绍了Vue.js 中的条件渲染指令Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件。本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考...
  • Vue条件渲染

    多人点赞 2019-06-14 09:29:09
    本博客记录了小编在学习Vue过程中的体会与感悟,简单来说就是小编的学习笔记,学习...用于条件性的渲染一块内容,这块内容只会在指令的表达式返回truthy值的时候被渲染。 <h1 v-if="awesome">I like Vue!&...
  • <!... <...条件渲染指令与循环指令</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="ap
  • 条件渲染指令v-if和v-show v-if和v-show的区别 如果用v-if和v-show来实现DOM元素的显示与不显示 v-if实现dom元素的删除 v-show只是内部添加display:none样式 需要频繁的使用切换,那么就用v-show (使用了指令 v-if...
  • 1.是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。  2.是惰性的,只有当条件为true时才会渲染,如果条件为false则什么都不做  3.有很高的切换开销,适用于...
  • Vue 条件渲染

    2019-09-11 22:55:03
    因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想同时渲染多个多个元素呢? 此时,可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if。最终的渲染结果将不包含 <templ....
  • vue条件渲染

    2020-04-15 12:38:45
    v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。所谓truty值,和true有一些区别: MDN解释为:在 JavaScript 中,truthy(真值)指的是在布尔值上下文中,转换后的值为...
  • 3.Vue 条件渲染

    2020-07-04 12:43:59
    这篇文章我们来讲一讲Vue中的指令条件渲染指令 (Directives) 是带有 v- 前缀的特殊 attribute,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。v-if 和 v-show 指令用于条件性地渲染一块内容。
  • 05、Vue条件渲染

    2020-09-06 17:07:50
    Vue条件渲染  小白又来了~今天学习了条件渲染,主要有v-if,v-else,v-show三个指令,以下是三个指令的作用: v-if:根据表达式的值的真假条件渲染元素。在切换时元素及其数据绑定/组件被销毁并重建。如果元素是&...
  • Vue条件渲染是使用v-if , v-else,v-show等指令实现元素的移除,样式隐藏,显示等 案例如下代码: &lt;div id="demo"&gt; &lt;p v-if="ok"&gt;成功了&lt;/p&gt; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 938
精华内容 375
关键字:

vue条件渲染指令

vue 订阅