Vue简单界面了解MVVM 理解响应式原理
作者:互联网
最终效果如图
如果不用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>
标签:count,Vue,界面,MVVM,ruleId,selectId,套餐,id,foreignId 来源: https://blog.csdn.net/qq_25128693/article/details/98617942