vue 写点击展开及收起

小灰灰 2021-12-18 22:21 554阅读 0赞

<template>
      <div>
        <div>
          <p id="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, atque necessitatibus. Incidunt repellat, distinctio cupiditate fuga ipsam sunt, ad eligendi, velit suscipit molestiae natus voluptatibus molestias enim voluptatem quae inventore repudiandae assumenda fugiat aliquid tenetur ratione optio id nam sint. Voluptatem molestias error modi aperiam. Aut at perspiciatis natus provident corrupti quam error, vel ullam vitae quis ex voluptatem pariatur totam iste autem est doloremque harum magnam nihil. Veniam dolor laboriosam nesciunt beatae vel facilis quis delectus? Amet delectus obcaecati officia maiores blanditiis, assumenda corporis aliquam perferendis maxime, rerum repudiandae quo est nemo. Corrupti veritatis esse impedit ullam quo fugiat inventore ab tempora recusandae provident similique molestias eaque laudantium tenetur nulla totam velit maxime dolor nesciunt, rem maiores. Incidunt in velit error exercitationem veniam? Iusto tenetur maiores sequi eos ipsam, incidunt voluptate possimus dolorem, culpa cumque natus quae cum nisi totam qui voluptatum itaque. Dolores excepturi deserunt rerum atque eligendi ipsa nulla sit dignissimos! Ad quaerat suscipit, illum quia voluptatibus vero nesciunt excepturi labore sint tenetur odit repudiandae doloribus eos accusamus facere illo sed. Asperiores placeat possimus illo vitae expedita repellat quia! Accusamus eum reiciendis quos officiis consequuntur ut laborum quidem, illum ipsa dicta dolorum nam tempore placeat doloremque reprehenderit inventore provident amet accusantium, praesentium optio commodi dignissimos aliquid similique vel! Error minus iusto fuga ipsam harum molestias itaque rem, aperiam quos sit, reprehenderit corrupti dolorem minima quae tempora. Voluptatum, ullam perspiciatis ipsa cumque voluptate quaerat iure adipisci eligendi? Excepturi aliquid id vel dolores, optio doloremque ipsam architecto velit deserunt atque quibusdam ratione facilis laboriosam veniam numquam fugiat officia dolorum mollitia! Rem nulla ad doloremque in, iusto dolore laudantium animi culpa deserunt! Alias provident magnam asperiores laboriosam iure mollitia error culpa quia, voluptates facilis, reprehenderit soluta autem voluptas pariatur officia. Consequatur natus, quod esse eum earum rerum odio voluptatem aliquid possimus ex enim veniam culpa ut quia illum fugiat? Sint nulla, deleniti est architecto odio molestias asperiores ex culpa et, excepturi quia distinctio necessitatibus harum, expedita dolor temporibus perspiciatis! Quas at iste cumque aut vel similique distinctio nam est. Quae dolore fuga, veniam est ex, expedita blanditiis ipsam voluptatum totam voluptate maxime beatae exercitationem aut sint deleniti velit voluptas quidem quisquam error maiores aperiam magni nesciunt? Alias consequatur repellat suscipit blanditiis sed soluta necessitatibus quae consequuntur et natus fuga aperiam vel, magni ratione! Voluptate laborum perferendis a nesciunt error! Consequuntur fugiat ipsam error vero distinctio, quos amet maiores dolor ab? Odit cum mollitia porro sed nostrum distinctio sunt voluptate, magni ex eius atque itaque! Commodi illum vel ex aliquam in delectus, at dolorum iure, aspernatur fuga ratione atque veritatis soluta nihil quos quod officia, iusto dolores optio velit corporis? Distinctio, voluptatum adipisci atque ab iste ex odit, dolores libero cum, voluptatibus nesciunt voluptas aliquid. Dolore, repudiandae fugit vero iusto sequi, voluptatem doloremque commodi sunt odit ex molestias quos? Perferendis, quidem quam? Odio sed eaque id? Adipisci, recusandae distinctio minus porro magnam, est voluptas eius dignissimos repudiandae ipsa nobis error. Nobis, voluptates? Sapiente pariatur recusandae blanditiis doloribus. Laboriosam accusantium inventore eveniet.</p>
        </div>
        <div>
          <a href="#" @click="xxx()">{
       {sss?"收起":"展开"}}</a>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return{
          sss:false,
    
        }
      },
      methods:{
        xxx () {
          // document.getElementById("p").style.height="auto"
          // this.sss=!this.sss
          if(this.sss==false){
            document.getElementById("p").style.height="auto"
            this.sss=!this.sss
          }else{
            document.getElementById("p").style.height="200px"
            this.sss=!this.sss
          }
        }
      }
    }
    </script>
    
    <style>
      p{
        height: 200px;
        overflow: hidden;
      }
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDcyNTgz_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDcyNTgz_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDcyNTgz_size_16_color_FFFFFF_t_70]: /images/20211219/caa22bdd5e57433092caf8bfa185e950.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDcyNTgz_size_16_color_FFFFFF_t_70 1]: /images/20211219/2ffad959891e42498f251ecb0f5a3a3a.png