v-if,v-else
if Else
2023-09-27 14:26:51 时间
使用v-if,v-else实现组件切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件切换</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<a href="" @click.prevent="flag=true">登录</a>
<a href="" @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<script>
Vue.component('login', {
template: '<h3>登录组件</h3>'
})
Vue.component('register', {
template: '<h3>注册组件</h3>'
})
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
});
</script>
</body>
</html>
官方提供的component标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件切换</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>
<component :is="comName"></component>
</div>
<script>
Vue.component('login', {
template: '<h3>登录组件</h3>'
})
Vue.component('register', {
template: '<h3>注册组件</h3>'
})
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data:{
comName: "login"
}
});
</script>
</body>
</html>
学习资源推荐:https://blog.csdn.net/qq_42813491/article/details/90213353
相关文章
- jemter 使用if控制器,选择需要的内容
- How to do IF NOT EXISTS in SQLite
- python中if x 和if x is not None的区别用法详解
- python判断语句if...elif...else、if嵌套、三目运算符
- 避免过多if - else的新姿势:策略模式、工厂 + 策略
- 26Vue - 条件渲染(v-if)
- 减少该死的 if else 嵌套
- Linux - shell编程 if else,for循环,while,case语句
- CodeForces 732C Sanatorium (if-else)
- Steps to Resolve the Database JAVAVM Component if it Becomes INVALID After Applying an OJVM Patch
- 如何改变if与else的配对关系
- MyBatis 之四(动态SQL之 if、trim、where、set、foreach 标签)
- c语言中#if....#else...#endif的使用
- 《C#零基础入门之百识百例》(十二)选择结构 if-else语句 -- 偶数判断
- C# 之 if-else代码优化
- 使用 值 if 条件 else 另一个值 可简化语法形式
- 【安卓疑难杂症】:安卓安装、gradle下载、AndroidStudio报错:Connection timed out: connect If you are behind an HTTP proxy
- 软件设计-项目中的if else太多了,该怎么重构?
- if...else优化之策略模式学习
- Vue-条件渲染的基本使用(v-if,v-show,v-else相关指令使用)
- Java的流程控制(选择结构语句 if ~ switch &循环结构语句dowhile ~ for)