<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件之使用动态组件灵活设置页面布局</title>
<script src="vue.js"></script>
</head>
<body>
<div id="hdcms">
<div :is="formType"></div>
<input type="radio" v-model="formType" value="hdInput">单行文本框
<input type="radio" v-model="formType" value="hdTextarea">多行文本框
</div>
<script>
var hdInput = {
template: "<div><input/></div>"
};
var hdTextarea = {
template: "<div><textarea></textarea></div>"
};
new Vue({
el: "#hdcms",
components: {hdInput,hdTextarea},
data:{
formType:"hdInput"
}
});
</script>
</body>
</html>
