代码语言：javascript复制
<template>
<div class=”hello”>
<div style=”display:flex;”>
<span @click=”test($event,index);cur=index” v-for=”(item,index) in obj” :key=”item.name” >
<input v-model=”list” type=”checkbox” :label=’item.name’ :value=”item.name” >
{{item.name}}
<input v-if=”cur==index” type=”text” style=”border:0px;border-bottom:1px solid black;width:30px” v-model=”item.price”>
</span>
<button @click=”show”>提交</button>
</div>
</div>
</template>
<script>
export default {
name: ‘HelloWorld’,
props: {
msg: String
},
data(){
return{
cur:-1,
checkList: [‘选中且禁用’,’复选框 A’],
list:[],
obj:[
{name:’1′,price:”},
{name:’2′,price:”},
{name:’3′,price:”},
{name:’444′,price:”},
],
oklist:[],
}
},
watch:{
list:function(val){
console.log( this.list);
if(this.list.length < 1){
this.cur=50
}else{
for(let val in this.obj){
if(this.obj[val][‘price’]!=”){
this.oklist.push(this.obj[val])
console.log(this.oklist);
}
}
}
}
},
methods:{
show(){
console.log(this.obj);
},
test(e,index){
console.log(‘选择第：’,index);
console.log(‘长度’,this.list.length);
// console.log(index,e);
// this.list.push(e.srcElement.value)
},
}
}
</script>
<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
