vue评论显示隐藏，JavaScript显示关闭

<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-width:1000px; text-align:left; margin:0 auto;">

<span style="display:inline-block; width:120px;">姓名：{{val.name}}</span>

<span style="display:inline-block; width:230px;">名气：{{val.key}}</span>

<span style="display:inline-block; width:180px;">爱人：{{val.love}}</span>

<span style="display:inline-block; width:100px;">城市：{{val.city}}</span>

<span style="display:inline-block; width:120px;">状态：{{val.staut}}</span>

<span style="display:inline-block; width: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>

觉得有用，打个赏吧(*￣︶￣)