<template>
<div id="vue_det">
<h1>{{details()}}</h1>
<div>{{ok?'YES':'NO'}}</div>
<div></div>
<vuedemo></vuedemo>
<div>
<ul>
<li v-for="(val, index) in Mobjval" style="min-1000px; text-align:left; margin:0 auto;">
<span style="display:inline-block; 120px;">姓名：{{val.name}}</span>
<span style="display:inline-block; 230px;">名气：{{val.key}}</span>
<span style="display:inline-block; 180px;">爱人：{{val.love}}</span>
<span style="display:inline-block; 100px;">城市：{{val.city}}</span>
<span style="display:inline-block; 120px;">状态：{{val.staut}}</span>
<span style="display:inline-block; 120px;">桥接：{{val.tfline}}</span>
<button @click="btnstaute(index)">{{val=val.staut==true ? '隐藏':'显示'}}</button>
<span v-show="val.staut">显示当前行</span>
<span>index:{{index+1}}</span>
</li>
</ul>
</div>
</div>
</template>
<script>
import vuedemo from './vuedemo'
export default {
name: 'vue_det',
components: {
vuedemo
},
data () {
return {
site: '菜鸟教程',
ok: false,
Mobjval: [
{name: '张国荣',
key: Math.random(),
love: '最爱梅艳芳',
city: '香港',
staut: false
}, {name: '胡歌',
key: Math.random(),
love: '最爱刘亦菲',
city: '上海',
staut: false
}, {name: '成龙',
key: Math.random(),
love: '最爱花心萝卜头',
city: '香港',
staut: false
}
],
arrays: []
}
},
created () {
for (let i in this.Mobjval) {
this.arrays.push({
'name': this.Mobjval[i].name,
'key': this.Mobjval[i].key,
'love': this.Mobjval[i].love,
'city': this.Mobjval[i].city,
'staut': this.Mobjval[i].staut,
'tfline': true
})
}
this.Mobjval = this.arrays
},
methods: {
details () {
return this.site + '- 学的不仅是技术，更是梦想！'
},
btnstaute (index) {
// this.Mobjval.staut = !this.Mobjval.staut
// console.log(this.Mobjval.staut)i i
console.log(index, '当前数据')
console.log(this.arrays, '这是数组重组')
const tf = this.Mobjval[index].tfline
const fa = this.Mobjval[index].staut
if (tf !== fa) {
for (let i in this.Mobjval) {
this.Mobjval[i].staut = false
}
}
this.Mobjval[index].staut = !this.Mobjval[index].staut
// this.Mobjval[index].staut = true
// this.Mobjval[index].staut = !this.Mobjval[index].staut
console.log(this.Mobjval[index].staut)
}
}
}
</script>
<style>
</style>
觉得有用，打个赏吧(*￣︶￣)
