对vue v-if v-else-if v-else 的简单使用详解
更新时间：2018年09月29日 14:32:31 作者：九宝妈咪
今天小编就为大家分享一篇对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 的简单使用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue实现添加与删除图书功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-10-10
这篇文章主要为大家详细介绍了vue实现登录界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了vue 输入电话号码自动按3-4-4分割功能的实现代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
今天小编就为大家分享一篇初学vue出现空格警告的原因及其解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
vue3 setup语法糖之组件传参(defineProps、defineEmits、defineExpose)示例详
defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏，他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉，这篇文章主要介绍了vue3 setup语法糖之组件传参(defineProps、defineEmits、defineExpose)示例详解,需要的朋友可以参考下2023-01-01
功能比较简单，在单一html中使用vue.js分页展示数据，并未安装脚手架，或使用相关UI框架，此时需要手写一个分页器，不失为最合理最便捷的解决方案,需要的朋友可以参考下2020-11-11
这篇文章主要介绍了使用 vue 实例更好的监听事件及vue实例的方法,介绍了一种新增 vue 实例的方法，单独监听事件，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要介绍了Vue中this.$emit和this.$on的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue3中element-plus router的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue3 table表格组件的使用，文章围绕table表格组件是如何使用的相关资料展开详细内容,需要的朋友可以参考一下2021-11-11
最新评论