vue动态组价实例
程序员文章站
2022-06-07 13:39:08
...
自学vue，其中最懵的就是没有实例，下面是vue中动态组件的简单实例，希望对菜鸟的我们有所帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态组件</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<component v-bind:is="currentView"></component>
<!--component不是固定的元素，可以更换元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换：-->
<button v-on:click="currentfn(n++)">点击</button>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
currentView:'home',//currentView是固定的属性，不能改变。
n:1
},
components:{
home:{template:'<h1>我是home</h1>'},
posts:{template:'<h2>我是posts</h2>'},
archive:{template:'<h3>我是archive</h3>'}
},
methods:{
currentfn:function (n) {
if(n<2){
this.currentView =['home','posts','archive'][n]
}else{
app.n=0;
this.currentView =['home','posts','archive'][n]
}
}
}
})
</script>
</body>
</html>不明白的，可以对照官网上的解释来看会更清晰一点。
推荐阅读
-
Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）
-
快速解决vue动态绑定多个class的官方实例语法无效的问题
-
vue elementui el-form rules动态验证的实例代码详解
-
Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）
-
vue-router动态设置页面title的实例讲解
-
vue动态注册组件实例代码详解
-
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
-
vue动态设置img的src路径实例
-
Vue 框架之动态绑定 css 样式实例分析
-
快速解决vue动态绑定多个class的官方实例语法无效的问题