Vue的条件渲染详解

Vue的条件渲染

v-ifv-elsev-else-if以及v-show的用法

  • v-if的渲染方式:

    • 会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;
    • 只有当条件第一次变为真时,才会开始渲染条件块;
    • 切换开销比v-show高;
  • v-show的渲染方式:
    • 不管初始条件是什么,元素总是会被渲染;
    • 只是简单地基于 CSS 进行切换;
    • v-show的初始渲染开销比v-if高;

如果需要频繁的切换,则使用v-show

如果运行时条件很少改变,则用v-if

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
<body>
  <div id="app">
    <div v-if=‘score>=90‘>优秀</div>
    <div v-else-if=‘score<90&&score>=80‘>良好</div>
    <div v-else-if=‘score<80&&score>60‘>一般</div>
    <div v-else>比较差</div>
    <div v-show=‘flag‘>测试v-show</div>
    <button v-on:click=‘handle‘>点击</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      分支结构
      v-show的原理:控制元素样式是否显示 display:none
    */
    var vm = new Vue({
      el: ‘#app‘,
      data: {
        score: 80,
        flag: false
      },
      methods: {
        handle: function(){
          this.flag = !this.flag;
        }
      }
    });
  </script>
</body>
</html>

原文地址:https://www.cnblogs.com/apebro/p/12602352.html

时间: 2024-11-09 00:13:47

Vue的条件渲染详解的相关文章

(一)Python入门-4控制语句:02单分支选择结构-条件表达式详解

一:选择结构介绍 选择结构通过判断条件是否成立,来决定执行哪个分支.选择结构有多种形式,分为:单分 支.双分支.多分支.流程图如下: 二:单分支选择结构 if语句单分支结构的语法形式如下: if 条件表达式: 语句/语句块 其中:1条件表达式:可以是逻辑表达式.关系表达式.算术表达式等. 2语句/语句块:可以是一条语句,也可以是多条语句.多条语句,缩进必须对齐一致. 三:条件表达式详解 在选择和循环结构中,条件表达式的值为 False的情况如下: False.0.0.0.空值 None.空序列对

vue内置指令详解——小白速会

指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  等等 主要用法是绑定属性,动态更新HTML元素上的属性: <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="ur

VUE:条件渲染和列表渲染

条件渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1.条件渲染指令 v-if v-else 移除标签 v-show 通过样式隐藏 2.比较 v-if 与v-show 如果需要频繁切换 v-show 较好 --> <div id="

Rxjava2 Observable的条件操作符详解及实例

目录 简要: 1. Amb 2. DefaultIfEmpty 3. SwitchIfEmpty 4. SkipUntil 5. SkipWhile 6. TakeUntil 6.1 takeUntil(ObservableSource other) 6.2 takeUntil(Predicate stopPredicate) 7. TakeWhile 小结 简要: 需求了解: 在使用 Rxjava 开发中,经常有一些各种条件的操作 ,如比较两个 Observable 谁先发射了数据.跳过指定条

实例化vue发生了什么(详解vue生命周期)

const app = new Vue({ el:"#app', data:{ message:'hello,lifePeriod' }, methods:{ init(){ console.log('这是一个方法!') } } }) 触发 beforeCreate 钩子函数 组件实例刚被创建,此时无法访问到 el 属性和 data 属性等.. beforeCreate(){ console.log(`元素:${this.$el}`) //undefined console.log(`属性mes

【vue】条件渲染 v-if v-else

1.Vue 提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”.只需添加一个具有唯一值的 key 属性即可: <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </templa

vue项目目录结构详解

项目简介基于 vue.js 的前端开发环境,用于前后端分离后的单页应用开发,可以在开发时使用 ES Next.scss 等最新语言特性.项目包含: 基础库: vue.js.vue-router.vuex.whatwg-fetch 编译/打包工具:webpack.babel.node-sass 单元测试工具:karma.mocha.sinon-chai 本地服务器:express 目录结构 ├── README.md            项目介绍 ├── index.html          

vue组件生命周期详解

Vue实例有一个完整的生命周期,也就是说从开始创建.初始化数据.编译模板.挂在DOM.渲染-更新-渲染.卸载等一系列过程,我们成为Vue 实例的生命周期,钩子就是在某个阶段给你一个做某些处理的机会.Vue是一个自带组件系统的前端框架.Vue的每一个实例其实就是一个组件,我们在组织我们的页面结构的时候其实就是在定一个一个组件,然后拼装在一起,完成一个复杂的页面逻辑.组件主要包含:数据,模版,以及链接数据和模版的状态响应系统. beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件

vue实例生命周期详解

每个 Vue 实例在被创建之前都要经过一系列的初始化过程. 例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM . 在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会.例如,created 这个钩子在实例被创建之后被调用 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log