Vue简单界面了解MVVM 理解响应式原理

最新推荐文章于 2020-12-21 23:00:44 发布

置顶爱编码的波哥

最新推荐文章于 2020-12-21 23:00:44 发布

阅读量424

点赞数 1

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/qq_25128693/article/details/98617942

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最终效果如图
在这里插入图片描述
如果不用MVVM框架需要频繁操作DOM元素这样来说会比较麻烦使用Vue只用关系数据模型部分视图会自动进行更新

参考代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        * {
            padding: 0px;
        }

        .MainDiv {
            width: 96%;
            margin-left: 2%;
            margin-top: 10px;
            height: auto;
            min-height: 800px;
        }

        .Line {
            background-color: gray;
            height: 1px;
        }

        .MainDiv table {
            margin-top: 10px;
        }

            .MainDiv table tr td {
                padding: 6px;
            }
    </style>
</head>
<body>
    <div id="Main" class="MainDiv">
        <!--题头Start-->
        <div>
            <h2>会员套餐及详细列表/添加会员套餐信息及套餐详细信息</h2>
        </div>
        <div class="Line"></div>
        <!--题头End-->
        <!--主体Table部分Start-->
        <div v-for="tb in DataList">
            <table>
                <tbody>
                    <tr><td><b>套餐名称:</b><td><input type="text" v-model="tb.name" class="form-control" /></td></tr>
                    <tr><td><b>有限时长(月):</b></td><td><input type="number" v-model.number="tb.month" class="form-control"/></td></tr>
                </tbody>
                <tbody v-for="(rule,index) in tb.children">
                    <tr>
                        <td><b>规则方法名称:</b></td>
                        <td><select v-model="rule.selectId" class="selectpicker show-tick form-control"><option v-for="item in selectList" :value="item.selectId">{{item.selectName}}</option></select></td>
                        <td><b>有效次数:</b></td>
                        <td><input type="number" v-model.number="rule.count" class="form-control" /></td>
                        <td v-if="index==0"><button type="button" class="btn btn-danger" @click="AddRule(rule.foreignId)">+</button></td>
                        <td v-if="index==0"><button type="button" class="btn btn-danger" @click="DeleteRule(rule.foreignId)">删除</button></td>
                    </tr>
                </tbody>
            </table>
            <div class="Line" style="margin-top:3px"></div>
        </div>
        <br />
        <!--主体Table部分End-->
        <!--按钮Start-->
        <button @click="Save()" class="btn btn-primary">提交</button>
        <button @click="Cancel()" class="btn btn-danger">取消</button>
        <!--按钮End-->
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        //模拟数据
        //id:套餐id name:套餐名称 month:有效时长(月)
        //children 一个套餐包含多个规则
        //ruleId:规则id foreignId:外键套餐id selectId:下拉id值 count:有效次数
        const Data = [
            {
                id: 1, name: "A套餐", month: 1,
                children: [
                    { ruleId: 1, foreignId: 1, selectId: 1, count: 1 },
                    { ruleId: 2, foreignId: 1, selectId: 2, count: 2 }
                ]
            },
            {
                id: 2, name: "B套餐", month: 2,
                children: [
                    { ruleId: 3, foreignId: 2, selectId: 1, count: 3 },
                    { ruleId: 4, foreignId: 2, selectId: 2, count: 6 },
                    { ruleId: 5, foreignId: 2, selectId: 2, count: 7 }
                ]
            }
        ]

        //模拟数据 下拉选择
        const selectData = [
            { selectId: 1, selectName: "规则一" },
            { selectId: 2, selectName: "规则二" }
        ]

        //Vue模块js起始点
        var Vm = new Vue({
            el: '#Main',
            data: {
                DataList: Data,
                selectList: selectData
            },
            //方法集合
            methods: {
                //保存 在控制台查看数据变化
                Save() {
                    console.log(JSON.stringify(this.DataList))
                },
                //添加规则
                AddRule(foreignId) {
                    //新增规则Id都为0
                    let Model = { ruleId: 0, foreignId: foreignId, selectId: 1, count: 1 }
                    this.DataList.filter((item, index) => { return item.id === foreignId })[0].children.push(Model)
                },
                //删除规则
                DeleteRule(foreignId){
                    let childrenObj = this.DataList.filter((item, index) => { return item.id === foreignId })[0].children;
                    if (childrenObj.length == 1) {
                        return;
                    }
                    childrenObj.pop();
                },
                //取消
                Cancel() {
                    alert("取消!!!")
                }
            },
            //Dom全部加载完成后
            computed: {             

            }
        })
    </script>
</body>
</html>

爱编码的波哥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue简单界面了解MVVM 理解响应式原理

最终效果如图如果不用MVVM框架需要频繁操作DOM元素这样来说会比较麻烦使用Vue只用关系数据模型部分视图会自动进行更新参考代码如下<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <!--...
复制链接

扫一扫