component 动态组件
v-once 只渲染一次
<!DOCTYPE html>
<html>
<head>
<title>动态组件与v-once指令</title>
<script src="./vue.js"></script>
</head>
<body>
<div id='app'>
<!-- // 动态组件 is会根据type的值显示值 -->
<component :is="type"></component>
<!-- // 传统的 -->
<!-- <child-one v-if="type === 'child-one'"></child-one>
<child-two v-if="type === 'child-two'"></child-two> -->
<button @click="handleBtn">change</button>
</div>
<script>
// 使用v-once可以有效提高静态的数据效率，因为会放在内存中
Vue.component ('child-one', {
template: '<div v-once>child-one</div>'
})
Vue.component ('child-two', {
template: '<div c-once>child-two</div>'
})
var vm = new Vue({
el: '#app',
data: {
type: 'child-one'
},
methods: {
handleBtn :function() {
this.type = this.type === 'child-one' ? 'child-two' :'child-one'
}
}
})
</script>
</body>
</html>
网友评论