vue 怎么绑定一个数组的内容,并且是数组的未来元素也产生绑定
展开全部
<div id="example">
<div><input type="text" v-model="name"></div>
<ul >
<li v-for="(child,index) in children">
<span >{{ child }}</span>
<input v-model = "child">
<button @click="addChild(index)">新增</button>
<button v-on:click="removeChild(index)">X</button>
</li>
</ul>
<button @click="getData">输出</button>
</div>
在child输入框中输入字符能改变第一个元素 的内容 ,但是后来增加的未来元素的内容不会改变
$(function () {
var person = {
name: '',
children: [{name:""}]
}
var vm = new Vue({
el: "#example",
data: person,
methods: {
addChild: function (index) {
this.children.splice(index+1, 0, '')
},
removeChild: function (index) {
console.log(index)
this.children.splice(index , 1)
},
getData: function () {
console.log(this.children);
return this
}
}
<div><input type="text" v-model="name"></div>
<ul >
<li v-for="(child,index) in children">
<span >{{ child }}</span>
<input v-model = "child">
<button @click="addChild(index)">新增</button>
<button v-on:click="removeChild(index)">X</button>
</li>
</ul>
<button @click="getData">输出</button>
</div>
在child输入框中输入字符能改变第一个元素 的内容 ,但是后来增加的未来元素的内容不会改变
$(function () {
var person = {
name: '',
children: [{name:""}]
}
var vm = new Vue({
el: "#example",
data: person,
methods: {
addChild: function (index) {
this.children.splice(index+1, 0, '')
},
removeChild: function (index) {
console.log(index)
this.children.splice(index , 1)
},
getData: function () {
console.log(this.children);
return this
}
}
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询