046——VUE中组件之使用动态组件灵活设置页面布局

2024-02-02 16:03•mysql•阅读 2799

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <title>组件之使用动态组件灵活设置页面布局</title>
    <script src="vue.js"></script>
</head>
<body>
<div >
    <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>