devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用vue实现图片的显示和隐藏_v-show 图片的隐藏和显示控制

作者：我家自动化 | 2024-02-16 20:41:08

赞

踩

v-show 图片的隐藏和显示控制

  1. 涉及内容

v-for：可以实现页面列表渲染，常用来循环数组。

v-if和v-show：v-if用来控制元素显示和隐藏，属性为布尔值。v-show可以实现与v-if同样的效果，但是v-show是操作元素的display属性，而v-if会对元素进行删除和重新创造，所以v-if在性能上不如v-show。（！v-show会取v-show的反向指令，出现隐藏效果）

组件：在vue中，组件是构成页面中独立结构单元，能够减少重复代码的编写，提高开发效率，降低代码之间的耦合程度，使项目更易维护和管理。

template：template模板是用字符串保存的，写在HTML中有利于在编辑器中显示代码提示和高亮显示，不仅改善了开发体验，也提高了开发效率。<template>标签来定义结构模板，通过id值绑定在组件内的template属性上。

2.代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script src="js/vue.js"></script>
  7.         <style>
  8.             .content{
  9.                 width: 1100px;
  10.                 margin: 0 auto;
  11.                 border: 1px solid skyblue;
  12.                 display: flex;
  13.                 justify-content: space-between;
  14.                 flex-wrap: wrap;
  15.             }
  16.             .item{
  17.                 height:286px;
  18.                 width:213px;
  19.                 background-color: #7cc8c6;
  20.                 margin: 5px 0px;
  21.             }
  22.         </style>
  23.     </head>
  24.     <body>
  25.         <div id="app">
  26.             <div class="content" >
  27.                 <fu-img v-for="i in imgs" :im="i"></fu-img>     
  28.                 
  29.             </div>
  30.         </div> 
  31.         <template id="test">
  32.             <div class="item" @click="change">
  33.                 <img :src="im" v-show="show"/>
  34.             </div>
  35.         </template>
  36.         <script>
  37.             Vue.component("fu-img",{
  38.                 template:"#test",
  39.                 props:["im"],
  40.                 data:function(){
  41.                     return{
  42.                         show:true
  43.                     }
  44.                 },
  45.                 methods:{
  46.                     change:function(){
  47.                         this.show = !this.show;
  48.                     }
  49.                 }
  50.             });
  51.             var vm = new Vue({
  52.                 el:"#app",
  53.                 data:{
  54.                     imgs:["img/images/1_01.jpg",
  55.                           "img/images/1_02.jpg",
  56.                           "img/images/1_03.jpg",
  57.                           "img/images/1_04.jpg",
  58.                           "img/images/1_05.jpg",
  59.                           "img/images/1_06.jpg",
  60.                                 "img/images/1_07.jpg",
  61.                                 "img/images/1_08.jpg",
  62.                                 "img/images/1_09.jpg",
  63.                                 "img/images/1_10.jpg",
  64.                               "img/images/1_11.jpg",
  65.                                     "img/images/1_12.jpg",
  66.                                     "img/images/1_13.jpg",
  67.                                     "img/images/1_14.jpg",
  68.                                     "img/images/1_15.jpg",
  69.                                   "img/images/1_16.jpg",
  70.                                         "img/images/1_17.jpg",
  71.                                         "img/images/1_18.jpg",
  72.                                         "img/images/1_19.jpg",
  73.                                         "img/images/1_20.jpg",
  74.                                       "img/images/1_21.jpg",
  75.                                             "img/images/1_22.jpg",
  76.                                             "img/images/1_23.jpg",
  77.                                             "img/images/1_24.jpg",
  78.                                             "img/images/1_25.jpg"
  79.                                          
  80.                         ]
  81.               }                
  82.             });
  83.         </script>
  84.     </body>
  85. </html>

3.效果图

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/96522
推荐阅读