vue样式切换

1.解决问题

假设一个图片是pdf格式显示一种样式，是其它格式显示另一种样式。

2.解决方法

2.1代码截图

1.组件的样式部分（style）

2.组件的模板部分（template）

 

 3.组件的js部分（script）

 

2.2代码

1.style里定义一个pdf的样式和一个imgs的样式。如：

  .pdf {

    width: 120px;

  }

  .imgs {

    width: 700px;

  }

2.template的img标签里定义图片样式。样式的值可以是方法（可以传参），也可以是变量，这里使用方法。如：

      <img

        :src="url"

        :class="{ pdf: isPdf(file), imgs: !isPdf(file) }"

      />

3.script的method里写isPdf方法，方法里返回ture和false布尔值。

    isPdf(file) {

      const name = this.file.name.split(".")

      return (

        file.name.split(".")[name.length - 1] === "pdf" || file.name.split(".")[name.length - 1] ==="PDF"

      );

    },