code：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>动态组件与v-once指令</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
<div class="root">
<component :is="type"></component>
<button type="button" @click="change">change</button>
</div>
<script>
// v-once缓存组件,提升性能,提高静态内容的展示效率
Vue.component("child-one",{
template:"<div v-once>child-one</div>"
})
Vue.component("child-two",{
template:"<div v-once>child-two</div>"
})
new Vue({
el:".root",
data:{
type:"child-one"
},
methods:{
change(){
//三元表达式
this.type=this.type==='child-one'?
'child-two':'child-one';
}
}
})
</script>
</body>
</html>
effect:
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
