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


Posted in Javascript onSeptember 29, 2018

首先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 v-if v-else-if v-else 的简单使用详解

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

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

Javascript 相关文章推荐
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 #Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 #Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 #Javascript
详解React之key的使用和实践
Sep 29 #Javascript
vue给组件传递不同的值方法
Sep 29 #Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 #Javascript
浅谈vue项目打包优化策略
Sep 29 #Javascript
You might like
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
[00:15]TI9观赛名额抽取
2019/07/10 DOTA
Python通过解析网页实现看报程序的方法
2014/08/04 Python
Python如何实现文本转语音
2016/08/08 Python
python append、extend与insert的区别
2016/10/13 Python
基于Python List的赋值方法
2018/06/23 Python
Pytorch之保存读取模型实例
2019/12/30 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
StubHub德国:购买和出售门票
2017/09/06 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
C语言笔试题
2014/09/04 面试题
怎么写好自荐信
2013/10/30 职场文书
机电一体化专业推荐信
2013/12/03 职场文书
校园文明标语
2014/06/13 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
商标侵权律师函
2015/05/27 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
2016年安全月活动总结
2016/04/06 职场文书