对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 相关文章推荐
js加密解密字符串可自定义密码因子
May 13 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
JS如何生成随机验证码
Mar 02 Javascript
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
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
Python对象体系深入分析
2014/10/28 Python
python访问系统环境变量的方法
2015/04/29 Python
python @property的用法及含义全面解析
2018/02/01 Python
python生成密码字典的方法
2018/07/06 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
活动总结怎么写啊
2014/05/07 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python