vue中toggle切换的3种写法
前言：查看下面代码，在任意编辑器中直接复制粘贴运行即可
1：非动态组件（全局注册2个组件，借用v-if指令和三元表达式）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>toggle切换-非动态组件方式</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<child-one v-if="type === 'child-one'"></child-one>
<child-two v-if="type === 'child-two'"></child-two>
<button @click="handleClick">call me</button>
</div> <script> Vue.component('child-one', {
template: '<div>child-one</div>'
}) Vue.component('child-two', {
template: '<div>child-two</div>'
}) var vm = new Vue({
el: '#root',
data: {
type: 'child-one'
},
methods: {
handleClick: function() {
this.type = this.type === 'child-one'?'child-two':'child-one'
}
}
})
</script>
</body>
</html>
2：动态组件（使用vue自带component标签，它表示一个动态组件，配合is属性绑定type，动态组件会根据is里数据的的变化，自动加载不同的组件）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>toggle切换-动态组件方式</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<component :is="type"></component>
<button @click="handleClick">call me</button>
</div> <script> Vue.component('child-one', {
template: '<div>child-one</div>'
}) Vue.component('child-two', {
template: '<div>child-two</div>'
}) var vm = new Vue({
el: '#root',
data: {
type: 'child-one'
},
methods: {
handleClick: function() {
this.type = this.type === 'child-one'?'child-two':'child-one'
}
}
})
</script>
</body>
</html>
3：使用once指令（不要过度使用）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>once指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<child-one v-if="type === 'child-one'"></child-one>
<child-two v-if="type === 'child-two'"></child-two>
<button @click="handleClick">call me</button>
</div> <script> Vue.component('child-one', {
template: '<div v-once>child-one</div>'
}) Vue.component('child-two', {
template: '<div v-once>child-two</div>'
}) var vm = new Vue({
el: '#root',
data: {
type: 'child-one'
},
methods: {
handleClick: function() {
this.type = this.type === 'child-one'?'child-two':'child-one'
}
}
})
</script>
</body>
</html>
注：once优点——每次切换vue底层都是先销毁，然后在创建一个组件，这样是有一定性能消耗的，
once指令切换组件时不会销毁在重新创建组件，而是在第一次切换时把组件存入内存，之后就直接从内存里拿出来使用
once缺点——建议不要过度使用这个指令。除非当你需要渲染大量静态内容时，
极少数的情况下它会给你带来便利，除非你发现渲染因此变得很慢，否则它是没有必要的，再加上它在后期会带来很多困惑，
例如，一个开发者并不熟悉 v-once 或漏看了它在模板中，他们可能会花很多时间去找出模板为什么无法正确更新
vue中toggle切换的3种写法的更多相关文章
- vue中使用echarts的两种方法
在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...
- t-sql 中between and 的一种写法
t-sql 中between and 的一种写法: where GETDATE() BETWEEN BeginDateTime AND EndDateTime; BeginDateTime,EndDa ...
- java中for循环的6种写法
有些写法上的说明写的过于武断,可能有很多不当之处,仅供参考. package ForLoop; import java.util.ArrayList; import java.util.Itera ...
- Vue el与data的两种写法 && Object.defineProperty方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- 在JavaScript中创建命名空间的几种写法
在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: var sayHello = function() { return 'Hel ...
- js中创建命名空间的几种写法
在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: var sayHello = function() { return 'Hel ...
- 关于JQ中ready()方法的几种写法总结
——习惯贵在坚持,天才在于积累. 好久没写博客的我,似乎是忘记了当初写博客的初衷是要在博客笔记中提升自己的写作能力和积累自己的知识要点. 废话不多说. ready()方法作用: 在页面加载完成后,立即 ...
- 在js中创建命名空间的几种写法
在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: var sayHello = function() { return 'H ...
- vue后台管理项目中菜单栏切换的三种方法
第一种方法:vue嵌套路由(二) <el-menu :default-active="defaultActive" style="min-height: 100%; ...
随机推荐
- 使用XShell工具 linux 常用命令
- Fiddler 插件开发，使用 WPF 作为 UI 控件
Fiddler 插件的 UI,本身使用的 WinForm,这个例子是使用 WinForm 中的 WPF 容器,将 WPF 控件作为 Fiddler 插件的 UI 使用. 为什么使用 WPF ?为了自适 ...
- 全栈工程师对Python面试中is和==区别的详细解说！看完真的学到了！
面试实习生的时候,当问到 is 和 == 的区别时,很多同学都答不上来,搞不清两者什么时候返回一致,什么时候返回不一致.本文我们来看一下这两者的区别. 我们先来看几个例子: a = "hel ...
- Python笔记：设计模式之代理模式
代理通常就是一个介于寻求方和提供方之间的中介系统.其核心思想就是客户端(寻求方)没有直接和提供方(真实对象)打交道,而是通过代理对象来完成提供方提供的资源或操作. 代理其实就是封装实际服务对象的包装器 ...
- JQuery Easy UI 1.7官网最新版附1.7API
最新的Easy UI 1.7包括1.7的API已上传至百度云盘,有需要的,请自行下载!!! 使用示例: 注:红色加粗的必须引入!!! <!DOCTYPE html> <html> ...
- centOS服务器基本命令
1.卸载/安装mySQL:(因为我是该服务器的管理员,所以这些命令都不用在前面加sudo) yum remove mysqlyum install mysql 2.进入根目录 cd / 3.查看cen ...
- CSS @规则
最近在看极客时间winter大神的重学前端系列,遇到了许多不常用但是很重要的知识点.感觉视野得到了极大的开阔(打个广告,哈哈). 其中css @规则令人印象深刻.简单的做下笔记: @namespace ...
- 新手教程丨利用Python制作一款截图识别软件！
进入正文前给大家推荐一个微软开发的工具:Snipaste. 这是一款截图软件,把截出的图片放置到窗口上,可以随意移动,使用非常方便,并且支持各类电脑系统. 先简单介绍一下它的用法,F1截图,Ctrl+ ...
- python if语法
1.查看数据类型 print(type(1)) 2.同类型:数字相加 ,字符串拼接 a=input("输:") print(int(a)+5) 3.单if条件语句 if if 3& ...
- [PHP] PHP PDO与mysql的连接单例防止超时情况处理
这个数据库类主要处理了单例模式下创建数据库对象时,如果有两次较长时间的间隔去执行sql操作,再次处理会出现连接失败的问题,利用一个cache数组存放pdo对象与时间戳,把两次执行之间的时间进行了比较, ...