对vue v-if v-else-if v-else 的简单使用详解

首先vue.js请注意 2.1.0版本以上方可使用v-else-if

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="../vue.js"></script>
 </head>
 <body>

 <div id="box">

 <!--实例1 vue 2.1.0以上版本支持 v-if 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>
 <hr />

 <!--实例2 v-if / v-else-->
 <div v-if="type==='A'">ok!!!</div>
 <div v-else>no!!!</div>
 <hr />

 <!--实例3 模板中使用v-if / v-else-->
 <my-form :login-type="loginType"></my-form>
 <button @click="toggleFun">toggle loginType</button>

 </div>

 <script>

 var MyForm = {
 //template:"#myForm"
 props:['loginType'],
 template:`
  <div v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input"/>
  </div>
  <div v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input"/>
  </div>
 `
 }

 var app = new Vue({
 el:'#box',// ().$mount("#box");
 data:{
  type:'C',
  loginType:'username'
 },
 components:{
  "my-form":MyForm
 },
 methods:{
  toggleFun: function() {
  this.loginType = this.loginType === 'username'? 'email':'username';
  }
 },
 created:function (){
 }
 });
 </script>
 </body>
</html>

页面展示如下：

vue.js下载：https://github.com/vuejs/vue

以上这篇对vue v-if v-else-if v-else 的简单使用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js常用指令汇总（v-if、v-for等）

    Vue.js常用指令汇总（v-if、v-for等）

    有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素: eg: HTML: <div id="example01"> <p v-if="male">Male</p> <p v-if=&qu

  • Vue.js使用v-show和v-if的注意事项

    Vue.js使用v-show和v-if的注意事项

    关于两者的区别,官网是这样说的: 在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件.v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做--在条件第一次变为真时才开始局部编译(编译会被缓存起来). 相比之下,v-show 简单得多--元素始终被编译并保留,只是简单地基于 CSS 切换. 一般来说,v-if 有更高的切换

  • vue实现页面加载动画效果

    我们经常看到数据未出现时,页面中会有一条提示消息, 页面正在加载中,如何实现该效果呢 ,请看下面代码 <template> <section class="page" v-if="option" :style="{background: option.background,color: option.color||'#fff'}" :class="{'page-before': option.index < cu

  • vue页面加载闪烁问题的解决方法

    v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成.而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性. 使用场景 一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗.因此,如果需要频繁切换 v-sho

  • 解决使用Vue.js显示数据的时,页面闪现原始代码的问题

    今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数据时,原始代码会闪现一下.查访各方资料,终的解决方法. 第一步.加入一段css代码 <style type="text/css"> [v-cloak] { display: none; } </style> 第二步.在view上引用css模块 <div id="app" v-cloak> <h1>{{message}}</h1>

  • Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法

    vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然后再消失掉,如果要解决这个问题,案例如下: vue html代码块: <div id="divApp"> <div v-if="type === 'A'" v-cloak> A </div> <div v-else-if="type === 'B'" v-cloak> B </div> <div v-e

  • vue服务端渲染页面缓存和组件缓存的实例详解

    vue缓存分为页面缓存.组建缓存.接口缓存,这里我主要说到了页面缓存和组建缓存 页面缓存: 在server.js中设置 const LRU = require('lru-cache') const microCache = LRU({ max: 100, // 最大缓存的数目 maxAge: 1000 // 重要提示:条目在 1 秒后过期. }) const isCacheable = req => { //判断是否需要页面缓存 if (req.url && req.url ===

  • vue.js的computed,filter,get,set的用法及区别详解

    1.vue.js的computed方法: 处理复杂逻辑,基于依赖缓存,当依赖发生改变时会重新取值.用methods也可以实现同样的效果,但methods在重新渲染的时候会重新调用执行,在性能上computed优于methods,当不需要缓存时可用methods. 实例1:computed和methods实现翻转字符串 <template> <div> <input v-model="message"> <p>原始字符串: {{ messa

  • vue bus全局事件中心简单Demo详解

    1.vue-cli搭建好项目之后,使用npm安装vue-bus  npm install vue-bus 2.在入口文件main.js中全局注册 import Vue from 'vue'; import VueBus from 'vue-bus'; Vue.use(VueBus); 3.传递数据: this.$bus.emit("eventName",data) 4.接收数据: this.$bus.on("eventName",data) 5.注意事项 this的

  • 基于vue中css预加载使用sass的配置方式详解

    1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev node-sass 2.在build文件夹下的webpack.base.conf.js的rules里面添加配置,如下红色部分 { test: /\.sass$/, loaders: ['style', 'css', 'sass'] } <span style="color:#454545;"

  • vue安装和使用scss及sass与scss的区别详解

    vue安装和使用scss及sass与scss的区别详解

    1. 安装依赖:npm install node-sass sass-loader -D 2. webpack.base.conf.js文件 module: { { //手动添加这一条,相当于是编译识别sass! test: /\.scss$/, loaders: ["style", "css", "sass"]} } 3. 在.vue文件中使用 <style scoped lang="scss"> .box{ w

  • 对vue v-if v-else-if v-else 的简单使用详解

    首先vue.js请注意 2.1.0版本以上方可使用v-else-if <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../vue.js"></script> </head> <body> <div id="box&q

  • Vue监听数据渲染DOM完以后执行某个函数详解

    实例如下: vm.$watch('某data数据',function(val){ vm.$nextTick(function() { 某事件(); }); }) 以上这篇Vue监听数据渲染DOM完以后执行某个函数详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue.js 2.x之组件的定义和注册图文详解

    前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可. 模块化和组件化的区别 模块化:是从代码逻辑的角度进行划分的:方便代码分层开发,保证每个功能模块的职能单一 组件化:是从UI界面的角度进行划分的:前端的组件化,方便UI组件的重用 全局组件的定义和注册 组件Component是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 全局组件的定义和注

  • vue之组件内监控$store中定义变量的变化详解

    // 1.采用计算属性来获取$store中的值 computed: { listenstage() { return this.$store.state.iShaveMsg; } }, // 2.通过watch来检查定义计算属性获取到的值的变化 watch:{ listenstage: function(ov,nv){ console.log('watch start--'); if(this.$store.state.iShaveMsg){ //业务处理 } } console.log('wa

  • Vue实例的对象参数options的几个常用选项详解

    一. 新建一个Vue实例可以有下列两种方式: 1.new一个实例 var app= new Vue({ el:'#todo-app', // 挂载元素 data:{ // 在.vue组件中data是一个函数,要写成data () {}这种方式 items:['item 1','item 2','item 3'], todo:'' }, methods:{ // 方法成员 rm:function(i){ this.items.splice(i,1) } } }) // 之后再 export def

随机推荐