一、先说下需求
- 给所有的题打分，并最终打印最终打的分数
- 要用vue实现，这是我用vue的最重要的一点，用着简单！！！
二、下面看具体实现方法
- 直接看代码实现
- 修改文本框的分数，也会自动同步到list中
- 最后直接打印list即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>vue如何双向绑定v-for循环出来的input文本框</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<style type="text/css">
span {
padding-right: 10px;
}
input {
text-align: center;
width: 50px;
}
</style>
</head>
<body>
<div class="" id="app">
<p v-for="(item,key) in list">
<span>{{key}}</span>
<input :name="item.name" v-model="item.score"/>
<label>分</label>
</p>
<p>
<button type="button" @click="submit">打印题所有信息</button>
</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
list: {
'第1题': {name: '第1题', score: '0', type: '客观题'},
'第2题': {name: '第2题', score: '0', type: '客观题'},
'第3题': {name: '第3题', score: '0', type: '主观题'}
}
},
methods: {
submit: function () {
for (var key in this.list) {
var item = this.list[key];
console.log(JSON.stringify(item))
}
}
}
})
</script>
</html>