vue怎么实现点击插入输入框用数组数据的方式呢?
代码如下:
现在通过这种点击判断click状态只能执行一次,再次点击按钮,click则一直处于true的状态。可能是模式理解错误,大家有没有好的建议
<div class="form-group" id="22">
<control-label label="姓名:"></control-label>
<ui-input></ui-input>
<div v-for="item in addInputs" id="{{item.modal}}">
</div>
<ui-button id="add-input" label="新增input" v-on:click="addInput(times)">请输入代码</ui-button>
</div>
----------
//定义模块
var label=Vue.extend({
props:{
label:''
},
template:'<label class="control-label" v-text="label"></label>'
});
var input=Vue.extend({
template:'<input type="text" placeholder="请输入" v-model="msg"/>'
});
var button=Vue.extend({
// props:['idName','checkText'],
props:{
id:'',
label:''
},
template:'<button type="button" class="btn btn-primary" v-bind:id="id" v-text="label"></button>'
});
Vue.component('control-label',label);
Vue.component('ui-input',input);
Vue.component('ui-button',button);
var form=new Vue({
el:'body',
data: {
msg:'',
times:0,
addInputs:{modal:'<ui-input></ui-input>'}
},
methods: {
addInput:function(){
this.times++;
console.log(this.times);
// this.click=true; //if条件判断,true显示
}
}
})
有点看不懂你说什么。。。
<form action="">
<h4>姓名</h4><a href="javascript:void(0)" @click="add">新增</a>
<p v-for="name in form.names">
<input v-model="name.text" type="text" name="names[]"><a href="javascript:void(0)" @click="delete($index)">刪除</a>
</p>
</form>
<hr>
<pre>
{{ $data | json}}
</pre>
new Vue({
el: 'body',
data: {
form: {
names: [{
text: ""
}]
}
},
methods: {
add() {
this.form.names.push({
text: ""
})
},
delete(index) {
this.form.names.splice(index, 1)
}
}
})