精华内容
下载资源
问答
  • 简单理解Vue条件渲染

    2020-09-01 01:46:33
    主要帮助大家简单理解Vue条件渲染,什么是Vue条件渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 条件渲染指令

    2021-07-03 13:36:06
    vue中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件。 案例1 v-if 通过v-if来实现登录页面和注册界面的切换 html: <body> <div id="box"> <h1>用户注册\登录&...

    vue中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件。

    案例1 v-if
    通过v-if来实现登录页面和注册界面的切换

    html:

    <body>
    	<div id="box">
    		<h1>用户注册\登录</h1>
    		<input type="checkbox" v-model="iszc" />注册
    		<div class="show">
    			<div v-if="iszc">
    				<h4>用户注册</h4>
    				<p>id:<input type="text" /></p>
    				<p>pwd:<input type="password" /></p>
    				<p>okpwd:<input type="password" /></p>
    				<input type="button"  value="注册" />
    			</div>
    			
    			<div v-else>
    				<h4>用户登录</h4>
    				<p>id:<input type="text" /></p>
    				<p>pwd:<input type="password" /></p>
    				<input type="button"  value="登录" />
    			</div>
    		</div>
    	</div>
    </body>
    

    js:

    <script type="text/javascript">
    	var ve=new Vue({
    		el:"#box",
    		data:{
    			iszc:false
    		}
    	})
    </script>
    

    案例1 v-show
    通过v-show来实现程序员冬夏季上班时间的切换

    html:

    <body>
    	<div id="box">
    		<h1>程序员作息时间表</h1>
    		<input type="checkbox" v-model="is" />夏天
    		<div class="show">
    			<div v-show="is">
    				<!-- 夏天 -->
    				<span>8:00-18:00</span>
    			</div>
    			<div v-show="!is">
    				<!-- 冬天 -->
    				<span>9:00-18:30</span>
    			</div>
    		</div>
    	</div>
    </body>
    

    js:

    <script type="text/javascript">
    	var ve=new Vue({
    		el:"#box",
    		data:{
    			is:true
    		}
    	})
    </script>
    
    展开全文
  • Vue条件渲染

    多人点赞 2019-06-14 09:29:09
    本博客记录了小编在学习Vue过程中的体会与感悟,简单来说就是小编的学习笔记,学习...用于条件性的渲染一块内容,这块内容只会在指令的表达式返回truthy值的时候被渲染。 <h1 v-if="awesome">I like Vue!&...

            本博客记录了小编在学习Vue过程中的体会与感悟,简单来说就是小编的学习笔记,学习地址主要为Vue的官网,官网地址为:《Vue官方文档》。相关学习笔记会记录在我的博客专栏《前端Vue》中,欢迎大家关注~


    1、v-if

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

    <h1 v-if="awesome">I like Vue!</h1>

    也可以使用v-else添加一个else模块:

    <h1 v-if="awesome">I like Vue!</h1>
    <h1 v-else>no</h1>

    (1)在<template>元素上使用v-if条件渲染分组

    因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

    <template v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>

    (2)v-else

    v-else元素必须紧跟在带有v-if或v-else-if的元素后面,否则它将不会被识别。

    (3)v-else-if

    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>

    (4)用key管理可重复的元素

    Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处。例如,如果你允许用户在不同的登录方式之间切换:

    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address">
    </template>

    那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素,<input> 不会被替换掉——仅仅是替换了它的 placeholder。这样也不总是符合实际需求,所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key 属性即可:

    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input">
    </template>

    现在,每次切换时,输入框都会别重新渲染。

    2、v-show

    另一个用于根据条件展示元素的选项是v-show指令:

    <h1 v-show="ok">Hello!</h1>

    不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。v-show 不支持 <template> 元素,也不支持 v-else。

    展开全文
  • Vue 条件渲染 v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 <h1 v-if="awesome">Vue is awesome!</h1> 也可以用 v-else 添加一个“else 块”: &...

    Vue 条件渲染

    v-if

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

    <h1 v-if="awesome">Vue is awesome!</h1>
    也可以用 v-else 添加一个“else 块”:
    
    <h1 v-if="awesome">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>
    

    template 元素上使用 v-if 条件渲染分组
    因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把一个 template 元素当做不可见的包裹元素,并在上面使用 v-if。最终的渲染结果将不包含 template元素。

    <template v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>
    

    v-else
    你可以使用 v-else 指令来表示 v-if 的“else 块”:

    <div v-if="Math.random() > 0.5">
      Now you see me
    </div>
    <div v-else>
      Now you don't
    </div>
    

    v-else元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。

    v-else-if

    2.1.0 新增

    v-else-if,顾名思义,充当 v-if 的“else-if 块”,可以连续使用:

    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
    

    类似于 v-else,v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

    用 key 管理可复用的元素
    Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处。例如,如果你允许用户在不同的登录方式之间切换:

    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address">
    </template>
    

    那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素,input不会被替换掉——仅仅是替换了它的 placeholder。

    自己动手试一试,在输入框中输入一些文本,然后按下切换按钮:

    这样也不总是符合实际需求,所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key attribute 即可:

    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input">
    </template>
    

    现在,每次切换时,输入框都将被重新渲染。请看:

    v-show
    另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样:

    <h1 v-show="ok">Hello!</h1>
    

    不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

    注意,v-show 不支持 元素,也不支持 v-else。

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

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

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

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

    详细内容请进入:https://cn.vuejs.org/v2/guide/conditional.html

    列表渲染

    v-for 把一个数组对应为一组元素

    我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名

    <ul id="example-1">
      <li v-for="item in items" :key="item.message">
        {{ item.message }}
      </li>
    </ul>
    var example1 = new Vue({
      el: '#example-1',
      data: {
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]
      }
    })
    

    v-for 块中,我们可以访问所有父作用域的 propertyv-for 还支持一个可选的第二个参数,即当前项的索引

    <ul id="example-2">
      <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
      </li>
    </ul>
    var example2 = new Vue({
      el: '#example-2',
      data: {
        parentMessage: 'Parent',
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]
      }
    })
    

    你也可以用 of 替代 in 作为分隔符,因为它更接近 JavaScript 迭代器的语法:

    <div v-for="item of items"></div>
    

    在 v-for 里使用对象
    你也可以用 v-for 来遍历一个对象的 property。

    <ul id="v-for-object" class="demo">
      <li v-for="value in object">
        {{ value }}
      </li>
    </ul>
    new Vue({
      el: '#v-for-object',
      data: {
        object: {
          title: 'How to do lists in Vue',
          author: 'Jane Doe',
          publishedAt: '2016-04-10'
        }
      }
    })
    

    你也可以提供第二个的参数为 property 名称 (也就是键名):

    <div v-for="(value, name) in object">
      {{ name }}: {{ value }}
    </div>
    

    还可以用第三个参数作为索引:

    <div v-for="(value, name, index) in object">
      {{ index }}. {{ name }}: {{ value }}
    </div>
    

    详细内容请进入:
    https://cn.vuejs.org/v2/guide/list.html

    事件处理

    监听事件
    观看本节视频讲解
    可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

    
    <div id="example-1">
      <button v-on:click="counter += 1">Add 1</button>
      <p>The button above has been clicked {{ counter }} times.</p>
    </div>
    var example1 = new Vue({
      el: '#example-1',
      data: {
        counter: 0
      }
    })
    
    

    事件处理方法

    然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

    示例:

    <div id="example-2">
      <!-- `greet` 是在下面定义的方法名 -->
      <button v-on:click="greet">Greet</button>
    </div>
    var example2 = new Vue({
      el: '#example-2',
      data: {
        name: 'Vue.js'
      },
      // 在 `methods` 对象中定义方法
      methods: {
        greet: function (event) {
          // `this` 在方法里指向当前 Vue 实例
          alert('Hello ' + this.name + '!')
          // `event` 是原生 DOM 事件
          if (event) {
            alert(event.target.tagName)
          }
        }
      }
    })
    

    // 也可以用 JavaScript 直接调用方法

    example2.greet() // => 'Hello Vue.js!'
    

    还有许多方法在这个链接

    https://cn.vuejs.org/v2/guide/events.html

    表单绑定

    你可以用 v-model 指令在表单 input、textareaselect 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。

    v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:

    1.text 和 textarea 元素使用 value property 和 input 事件;
    2.checkbox 和 radio 使用 checked property 和 change 事件;
    3.select 字段将 value 作为 prop 并将 change 作为事件。

    文本

    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
    

    多行文本

    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{ message }}</p>
    <br>
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
    

    还有许多方法在这个链接
    https://cn.vuejs.org/v2/guide/forms.html

    展开全文
  • 条件渲染、列表渲染、Class与Style绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue</title> <script src=...

     条件渲染、列表渲染、Class与Style绑定

    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
    <div id="app">
      <p>{{ message }}</p>
       <div v-if="count > 100"> 大于100的</div>
       <div v-else-if="count > 0 && count <10">大于0小于10</div>
       <div v-else="count < 0 ">负数</div>
        <div v-for="item in items">    
           <div v-show="item.age > 25" v-bind:style="{'color':'red'}">{{item.name}}</div>
           <div v-show="item.age < 25" v-bind:style="sty">{{item.name}}</div>
        </div>
    </div>
    <script>
    var app =new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!',
        sty:{
            color:'blue'
        },
        count:1,
        items:[{
              name:'zong',
              age:35
          },{
              name:'zsd',
              age:23
          }]
      }
    })
    
    </script>
    </body>
    </html>

       

    展开全文
  • 3.Vue 条件渲染

    2020-07-04 12:43:59
    这篇文章我们来讲一讲Vue中的指令和条件渲染,指令 (Directives) 是带有 v- 前缀的特殊 attribute,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。v-if 和 v-show 指令用于条件性地渲染一块内容。
  • 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-...
  • vue中我们可以使用v-if语句进行条件渲染,用v-for指令根据一组数组的选项列表进行渲染。本文就来为大家详细介绍一下vue中的条件渲染和列表渲染。一、条件渲染1、v-if语句hahahah如果seen为true,则显示,如果seen...
  • 条件渲染 实践 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...vue条件渲染</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue....
  • Vue条件渲染 Vue条件渲染是使用v-if , v-else,v-show等指令实现元素的移除,样式隐藏,显示等 案例如下代码: &lt;div id="demo"&gt; &lt;p v-if="ok"&gt;成功了&...
  • 文章目录vue 渲染条件渲染v-if 与 v-else渲染 以及 v-show列表渲染遍历对象 vue 渲染 条件渲染 v-if 与 v-else渲染 以及 v-show v-if 与 v-else 有条件的渲染一块内容, v-if 值选择的时候才加载,多余if不会存在内存...
  • 这篇文章主要帮助大家简单理解Vue条件渲染,什么是Vue条件渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下一、v-if显示单个元素注意else只能跟在v-if或者v-show后面Vue条件渲染显示我1显示我2var myVue =new...
  • Vue基础之Vue条件渲染

    2017-05-25 13:33:47
    vue基础-vue if
  • vue中的条件渲染

    2019-02-22 11:11:24
    v-if:如果判断条件show为false的话,就删除dom元素,反之为true就添加dom元素: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-...
  • Vue 3 条件渲染

    2020-10-15 21:31:15
    条件渲染实验介绍可以使用条件判断的方式来分别渲染。v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。<template&...
  • 一、官方文档 二、使用场景 官方文档已经介绍很详细了,首先component是内置的动态组件 component是一个内置组件,is的值来判断使用哪一个业务组件 所以我认为多个组件在同一位置根据条件进行展示的情况可以使用 三...
  • v-if v-if、v-else-if、v-else 这三个指令与JavaScript的条件语句if、else...在 template 元素上使用 v-if 条件渲染分组 因为 v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把
  • Vue条件渲染v-if和v-show的区别
  • 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">...
  • -- 只有按下enter键时 才会提交 --> 提交" v-on:keydown.enter="submit"/> </form> </body> </html> <script type="text/javascript"> new Vue({ el:"#box", data:{ } }) </script> 条件渲染 ...
  • 十二.Vue条件渲染

    2020-03-15 13:23:23
    v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 isShow 值的时候被渲染。 如何让下面三个html标签里的内容同时显示和隐藏,可以使用template模板,它并不是一个真正的html节点,当下面的内容被...
  • Vue条件渲染(v-if和v-show的区别)

    千次阅读 2018-12-27 14:44:35
    相同点:两者都可用作为条件判断元素是否显示。 不同点:1). v-if后可跟v-else-if 和 v-else用来进行不同条件下的显示组件的不同可能性,v-show只能作为是否展示。  2). v-if在想切换多个...
  • 条件渲染v-ifVue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。 <label>Username <label>Email</label>
  • 条件渲染 1.v-if: v-if=‘name’ :name值的true 或 false ,决定着这个标签的是否显示 2.v-show: v-show=‘show’ show的值true 或 false ,决定着这个标签的是否显示 两者的区别:当表达式中值是为false时...
  • 条件渲染 v-if 指令用于条件性地渲染一块内容。 这块内容只会在指令的表达式返回 true时被渲染,当不满足条件时,不会有这个dom节点 相对应的,有if判断的系列指令:v-if / v-else-if / v-else, 当前面的if和if-...
  • Vue是面向数据的编程,不再是直接操作dom EG: 实现div里的元素点击一次为红色,再点击为原来颜色的交替过程 看到冒号 ’ :’, 要想到这是指令 通过class 1. class的对象绑定 借助 class 和对象的形式来做样式和...
  • 条件渲染、列表渲染、Class与Style绑定. 条件渲染:v-if v-else v-else-if,v-show 列表渲染:v-for <div v-for="item in list"> style和class 的绑定:style可写成对象形式,然后通过属性绑定v-bind进行...
  • 一、条件渲染:【v-if】【v-show】 1、v-if 指令用于条件性地渲染一块内容。 1.1、在元素中使用 v-if 指令: <body> <div id="app"> <h1 v-if="seen">Hello qing!</h1> <div v-if...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,721
精华内容 11,488
关键字:

vue条件渲染

vue 订阅
友情链接: stopwatch.zip