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

    2019-10-14 14:23:56
    <!DOCTYPE html> <html> <head> ...meta charset="UTF-8">...vue的条件渲染</title> <script src="./vue.js"></script> </head> <body> <div id...
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>vue的条件渲染</title>
    	<script src="./vue.js"></script>
    </head>
    <body>
    	<div id="app">
    <!--        if为false时,不存在在dom-->
    		<div v-if="show">
                用户名:<input key="user"/>
            </div>
            <div v-else>
                邮箱:<input key="email"/>
            </div>
    <!--        show为false存在在dom上,只是不展示,既display为none-->
            <div v-show="show">{{message}}</div>
            <div v-if="tip==='a'">this is a</div>
            <div v-else-if="tip==='b'">this is b</div>
            <div v-else>this is others</div>
    	</div>
    	<script >
    		var vm = new Vue({
    			el:'#app',
    			data:{
                    message:"hello world",
                    show: false,
                    tip:'a'
    			}
            })
    
        </script>
    </body>
    
    </html>
    

     

    展开全文
  • vue的条件渲染

    2021-04-14 10:47:47
    vue根据条件渲染会尽可能复用之前dom框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></...

    vue根据条件渲染会尽可能的复用之前的dom框

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="vue.js"></script>
    </head>
    <body>
    <div id="root">
        <div v-if="show">
            用户名 <input>
        </div>
        <div v-else>
            邮箱名 <input>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#root',
            data() {
                return {
                    show:false
                }
            },
        })
    </script>
    </body>
    </html>

    同样存在一个input输入框,当切换show的状态时邮箱名显示为用户名,但是input框中的值并没有清空,造成这种情况的原因是因为vue会尽可能的复用dom元素来提高效率,对于这种情况可以增加一个key值来进行区分

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="vue.js"></script>
    </head>
    <body>
    <div id="root">
        <div v-if="show">
            用户名 <input key="name">
        </div>
        <div v-else>
            邮箱名 <input key="email">
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#root',
            data() {
                return {
                    show:false
                }
            },
        })
    </script>
    </body>
    </html>

    上述情况就不会存在了,祝好

    展开全文
  • 本篇文章主要介绍了深入理解Vue 的条件渲染和列表渲染,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 介绍之前一段时间由于工作很忙,没有时间继续学习Vue,今天算是继续对之前的学习进行补充了,今天要学习的便是Vue的条件渲染和列表渲染,我们将讨论if、if-else、if-else-if,show等。在列表渲染中,我们将讨论如何...

    介绍

    之前一段时间由于工作很忙,没有时间继续学习Vue,今天算是继续对之前的学习进行补充了,今天要学习的便是Vue的条件渲染和列表渲染,我们将讨论if、if-else、if-else-if,show等。在列表渲染中,我们将讨论如何使用for循环。


    6084e22af93c43dd18719e73111bde04.png

    条件渲染

    对于条件渲染,其概念就是满足条件的渲染界面输出,在Vue中借助if,if-else,if-else-if,show等的帮助下完成条件检查,我们首先通过一个实例来解释条件渲染的细节


    e109ab477e9567447842089ccaa7d840.png

    浏览器效果


    c731d9d3ceb2e276e5240336a5541dd5.png

    在上面的例子中,我们创建了一个按钮和两个带有消息的h1标签。声明了一个名为show的变量,并将其初始化为值true。它显示在按钮附近。在单击按钮时,我们调用方法showdata,它切换变量show的值。这意味着在单击按钮时,变量show的值将从true变为false,false变为true。我们已将if分配给h1标记,如以下代码段所示。

    Click Me

    这是H1标签


    现在它将做的是,它将检查变量show的值,如果它是真的,将显示h1标签。单击按钮并在浏览器中查看,因为show变量的值更改为false,h1标记不会显示在浏览器中。仅在show变量为true时显示。

    以下是浏览器中的显示。


    5936bf665d707616f75af522fe80b7bf.png

    我们看下浏览器中dom的变化情况


    ed146538c20874d089e4a7d92ebf780c.png

    变为false时,h1已经不见了


    f225c7e28ca7ef1fc1b7476a4908dcc8.png

    下面是使用了if-else的示例


    e1bf40e2a352c227b1638316a8a7fa7d.png

    主要就是这段代码:

    这是H1标签

    这是H2标签


    现在,如果show为true,将显示“这是H1标签”,如果为false,则显示“这是H2标签”。这是我们将在浏览器中获得的内容。


    ed83a37bdb3923d8e9f157925e426a09.png

    点击按钮后变化


    1a97feb39a625ea84e359205ae66ea2b.png

    接下来是v-show的示例


    0c17d1bcff2873f98d88cd04cf4f4e92.png

    v-show的行为与v-if相同。它还根据分配给它的条件显示和隐藏元素。v-if和v-show之间的区别在于v-if如果条件为false则从DOM中删除HTML元素,如果条件为真则将其添加回来。而v-show隐藏了元素,如果条件为false,则display:none。如果条件为真,它会显示元素返回。因此,元素始终存在于dom中。

    列表渲染

    • v-for

    现在让我们使用v-for指令进行列表渲染


    95f298ba0ad5ef7e9a40388c55e25643.png

    名为items的变量声明为数组。在方法中,有一个名为showinputvalue的方法,它被分配给带有水果名称的输入框。在该方法中,使用以下代码将输入文本框内的水果添加到数组中

    showinputvalue : function(event) { this.items.push(event.target.value);}

    我们使用v-for来显示输入的水果,如下面的代码片段所示。V-for迭代数组中存在的值。

    • {{a}}

    要使用for循环迭代数组,我们必须使用v-for = "a in items",其中a保存数组中的值并显示直到所有项都完成。我们看下浏览器输出:


    372e6a1c5665fe989859cdfbdaa642e2.png

    尝试输入一些水果名称:


    b2401cef408801831d9b08fa6bc3c8e5.png

    Dom代码对比


    0b5bb0f1b8874c0f4cb253ecfe84aafd.png

    如果我们希望显示数组的索引,则使用以下代码完成:


    b408eded5775b62a331d0c68f08fd444.png

    主要代码如下

    {{index}}--{{a}}

    浏览器效果如下


    a7bb767b3a2bf5f74f64d57eff5745be.png

    总结

    以上就是对Vue中的条件渲染和列表渲染的介绍,非常的简单,但是越是简单的东西越是要打捞基础,就像是学习编程语言的语法一样,希望对和我一样初学Vue的小伙伴有一些帮助,共同进步!


    7d9e048d56c3331e53b62b021b38b8b8.png

    展开全文
  • 介绍之前一段时间由于工作很忙,没有时间继续学习Vue,今天算是继续对之前的学习进行补充了,今天要学习的便是Vue的条件渲染和列表渲染,我们将讨论if、if-else、if-else-if,show等。在列表渲染中,我们将讨论如何...

    介绍

    之前一段时间由于工作很忙,没有时间继续学习Vue,今天算是继续对之前的学习进行补充了,今天要学习的便是Vue的条件渲染和列表渲染,我们将讨论if、if-else、if-else-if,show等。在列表渲染中,我们将讨论如何使用for循环。


    da21128bb5f29f9818d986fffcacaa39.png

    条件渲染

    对于条件渲染,其概念就是满足条件的渲染界面输出,在Vue中借助if,if-else,if-else-if,show等的帮助下完成条件检查,我们首先通过一个实例来解释条件渲染的细节


    507268228916f6b7d7b8de818468f6c1.png

    浏览器效果


    163c9e50dbd028cab9145611299e58c1.png

    在上面的例子中,我们创建了一个按钮和两个带有消息的h1标签。声明了一个名为show的变量,并将其初始化为值true。它显示在按钮附近。在单击按钮时,我们调用方法showdata,它切换变量show的值。这意味着在单击按钮时,变量show的值将从true变为false,false变为true。我们已将if分配给h1标记,如以下代码段所示。

    Click Me

    这是H1标签


    现在它将做的是,它将检查变量show的值,如果它是真的,将显示h1标签。单击按钮并在浏览器中查看,因为show变量的值更改为false,h1标记不会显示在浏览器中。仅在show变量为true时显示。

    以下是浏览器中的显示。


    41f6fa03ecfa61d2a413c265f80518ff.png

    我们看下浏览器中dom的变化情况


    8314d67a1d661f941cabeb8b882ce484.png

    变为false时,h1已经不见了


    38cb6c0cee8f1ce1b43f3ccbff3c7b2d.png

    下面是使用了if-else的示例


    825b050956c31b48ca84020d32c5e0c5.png

    主要就是这段代码:

    这是H1标签

    这是H2标签


    现在,如果show为true,将显示“这是H1标签”,如果为false,则显示“这是H2标签”。这是我们将在浏览器中获得的内容。


    12699c0bbed0968eae1443d6f34c3ec5.png

    点击按钮后变化


    551cb8c4d18c6541e909eb90a94b9da2.png

    接下来是v-show的示例


    8f652d4830019f5d5ccd992c1ab1549d.png

    v-show的行为与v-if相同。它还根据分配给它的条件显示和隐藏元素。v-if和v-show之间的区别在于v-if如果条件为false则从DOM中删除HTML元素,如果条件为真则将其添加回来。而v-show隐藏了元素,如果条件为false,则display:none。如果条件为真,它会显示元素返回。因此,元素始终存在于dom中。

    列表渲染

    • v-for

    现在让我们使用v-for指令进行列表渲染


    cb98a72b9d1c2cd623ac0b7e68c5dd38.png

    名为items的变量声明为数组。在方法中,有一个名为showinputvalue的方法,它被分配给带有水果名称的输入框。在该方法中,使用以下代码将输入文本框内的水果添加到数组中

    showinputvalue : function(event) { this.items.push(event.target.value);}

    我们使用v-for来显示输入的水果,如下面的代码片段所示。V-for迭代数组中存在的值。

    • {{a}}

    要使用for循环迭代数组,我们必须使用v-for = "a in items",其中a保存数组中的值并显示直到所有项都完成。我们看下浏览器输出:


    1e98f5aa26a3058b24fdd07bdd28e114.png

    尝试输入一些水果名称:


    6c67ea6913724c99bbdcdaa19bfc51bb.png

    Dom代码对比


    604a06018fe9722aa0403ee8df38947a.png

    如果我们希望显示数组的索引,则使用以下代码完成:


    a544e302a06c253ebbfaae50d3aea240.png

    主要代码如下

    {{index}}--{{a}}

    浏览器效果如下


    2106f6635b44694a1a43dca5f4b84760.png

    总结

    以上就是对Vue中的条件渲染和列表渲染的介绍,非常的简单,但是越是简单的东西越是要打捞基础,就像是学习编程语言的语法一样,希望对和我一样初学Vue的小伙伴有一些帮助,共同进步!


    1a15bfdae8b0809b62f687d875fc40db.png

    展开全文
  • vue的条件渲染和遍历

    2020-10-28 08:27:29
    vue的条件渲染和遍历 <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <!...
  • 十日谈 : Vue的条件渲染案例欢迎阅读我的Vue学习日记登录切换的小案例 欢迎阅读我的Vue学习日记 登录切换的小案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
  • Vue入门(1):Vue的条件渲染、声明式渲染以及处理用户输入 一、什么是Vue.js Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。...
  • 2.6 vue 的条件渲染

    2020-05-12 22:56:56
    vue v-if 与 v-show ...Vue 条件渲染</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <!-- v-if:为false时 DOM
  • 这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多,而且很重要,所以,今天添加一点小笔记。条件渲染v-if在 < template > 中配合 v-if 渲染一整组在使用 v-if 控制元素时候,我们需要将它添加到这个...
  • Vue的条件渲染指令

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

    千次阅读 2019-05-23 20:03:25
    三、条件渲染 通过条件指令可以控制元素创建(显示)或者销毁(隐藏) v-if 条件判断使用 v-if 指令 v-else v-else 指令给 v-if 添加一个 “else” 块 v-else-if 用作 v-if else-if 块 v-show 使用v-...
  • 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">...
  • 条件渲染 上一篇:Class 与 Style 绑定:https://segmentfault.com/a/11...下一篇:Vue的事件处理方法:https://segmentfault.com/a/11... v-if 在 < template > 中配合 v-if 渲染一整组 在使用 v-if 控制元素...
  • 一、条件渲染 1、v-if语句 <div v-if="seen">hahahah</div> <!-- v-if插入或者删除元素指令 -->   如果seen为true,则显示,如果seen为false,则不显示 2、v-if和v-else...
  • 条件渲染 1、v-if v-if指令就是插入节点或删除节点 1.1、在 <template> 中配合 v-if 条件渲染一整组 【案例】将下面3个以整组形式显示出来 <div id="app"> <template v-if="ok"> <h1>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,036
精华内容 814
关键字:

vue的条件渲染

vue 订阅