- Vue中 v-show指令的简单demo，代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
list-style: none;
}
.border-style{
border: 2px solid deeppink;
height: 150px;
width: 350px;
}
</style>
</head>
<body>
<div class="app">
<ul>
<li v-for="(item,index) in message" :key='item.index' @click="showText(index, item.id)">
<!-- 可以在函数的()里面把需要传递的参数传进去 -->
{{item.name}} {{item.id}} {{item.num}}<br />
<div class="border-style" v-show="isShow === index"></div>
</li>
</ul>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '.app',
data: {
isShow: 0, //这里默认为0，取到message数组里面第一条数据
message: [
{id: '1',name: '火锅',num: '99/人'},
{id: '2',name: '烧烤',num: '89/人'},
{id: '3',name: '烤鱼',num: '88/条'}
]
},
methods: {
showText: function (index, id) {
const self = this;
if (self.isShow === index) {
self.isShow = -1; //在这里就将它赋值为-1 由于：-1 != index 所以其他内容隐藏 ，被点击的则打开
} else {
self.isShow = index; //这里是把index赋值给isShow，isShow=index则显示
}
}
}
})
</script>