2021-09-19 内容显示或隐藏

vue 内容显示或隐藏

使用vue实现点击按钮显示内容或者隐藏

这是要显示的数据（可以使用 axios 读取本地json文件或者api,我这边是模拟一下直接获取了）

 data() {
            return {
                data: [
                    { "id": 1, "title": "《望庐山瀑布》", "content": "日照香炉生紫烟，遥看瀑布挂前川。飞流直下三千尺，疑是银河落九天。" },
                    { "id": 2, "title": "《子夜吴歌·秋歌》", "content": "长安一片月，万户捣衣声。秋风吹不尽，总是玉关情。何日平胡虏，良人罢远征。" },
                    { "id": 3, "title": "《侠客行》", "content": "君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。" },
                    { "id": 4, "title": "《渡荆门送别》", "content": "渡远荆门外，来从楚国游。山随平野尽，江入大荒流。月下飞天镜，云生结海楼。仍怜故乡水，万里送行舟。" },
                    { "id": 5, "title": "《赠孟浩然》", "content": "吾爱孟夫子，风流天下闻。红颜弃轩冕，白首卧松云。醉月频中圣，迷花不事君。高山安可仰，徒此揖清芬。" }
                ]

            }

        }

首先肯定是引用 js 了（省略了…）

这是将获取的数据显示到页面上 （样式就不贴了）

<div id="app">
    <div class="big" v-for="(data,index) in data" :key="index" :title="data.content">
        <h3>{{data.title}}</h3>
        <p class="bottom" :id="'bottom'+index">{{data.content}}</p>
        <p class="show" :id="'hclick'+index" @click="bclick(index)" type="button">﹀</p>
    </div>
</div>

接下来创建一个 bclick 方法，将参数传进去 参数是点击的索引

methods: {
    bclick(index) {
        console.log(index);
        if ($("#hclick" + index).text() == '︿') {
            $("#bottom" + index).hide(1000, "linear");
            $("#hclick" + index).html('﹀');
        } else {
            $("#bottom" + index).show(500);
            $("#hclick" + index).html('︿');
        }
    }
}

结束…
1、将vue获取到的数据显示到页面上
2、创建点击方法
3、点击之后打开当前点击的内容