正文

Vue中is的用法

譬如朝露 V管理员/ / 0 评论/ 876阅读
03 20

Vue中的is是用来动态切换组件的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				{{title}}
			</div>
			<div>
				<div is="row"></div>
				<div :is="root"></div>
			</div>
		</div>
		<script>
			var row={
				template:'<div>{{msg}}</div>',
				data(){
					return {
						msg:'组件1'
					}
				}
			}
			var root={
				template:'<div>{{msg}}</div>',
				data(){
					return {
						msg:'组件2'
					}
				}
			}
			new Vue({
				el:'#app',
				data:{
					title:'hello vue',
					root:'root'
				},
				components:{
					row,
					root
				}
			})
		</script>
	</body>
</html>

如果使用is，那么直接写组件的名称就可以，如果使用：is使用的是data中的变量

下面案例是一个简单的组件切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				{{title}}
			</div>
			<div>
				<div :is="root"></div>
			
			</div>
			<button @click='show'>显示组件1</button>
			<button @click="shows">显示组件2</button>
		</div>
		<script>
			var row={
				template:'<div>{{msg}}</div>',
				data(){
					return {
						msg:'组件1'
					}
				}
			}
			var root={
				template:'<div>{{msg}}</div>',
				data(){
					return {
						msg:'组件2'
					}
				}
			}
			new Vue({
				el:'#app',
				data:{
					title:'hello vue',
					root:'root'
				},
				components:{
					row,
					root
				},
				methods:{
					show(){
						this.root='row'
					},
					shows(){
						this.root='root'
					}
				}
			})
		</script>
	</body>
</html>

效果如下：

Vue中is的用法

文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。