Vue 动态表单模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue动态表单</title>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<div class="line" v-for="(item,index) in dataModel">
<input type="text" v-model="dataModel[index].value1" />
<span>{{dataModel[index].value1}}</span>
<button v-bind:data-index="index" v-on:click="submitClick">提交</button>
<input type="text" v-model="dataModel[index].value2" />
<span>{{dataModel[index].value2}}</span>
</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
// 创建一个空的数组
dataModel: []
},
created: function () {
// 这里是动态生成v-model,这个可以放在网络请求成功里面;
var len = 3;
for (var i = 0; i < len; i++) {
var item = { value1: '', value2: '' };
this.dataModel.push(item);
}
},
methods: {
// 显示v-model里面的数据
submitClick: function (event) {
var tag = event.target;
var index = tag.getAttribute('data-index');
alert(this.dataModel[index].value1);
}
}
})
</script>
</html>Tags : 本文未设置标签
所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网，如果有侵权内容、不妥之处，请联系我们删除。敬请谅解！
Previous post
Vue-watch 观察者代码
Next post
JS 递归优化
已有 2 条评论