vue中的图片引入、动态绑定样式

1. 图片引入的二种方式

注：require模块的本质是对象，输入时必须找到对象的属性

?

1 2 3 4 5 6 7 8 9 10 11 12 13

//第一种 需要在data中写上 import png from "../assets/test.png";   //第二种 data(){   return {    png1:require("../assets/test.png"); } 或//不在return中   pngs:[      png1:require("../assets/test.png"); ] }

2.动态绑定样式

  :style ="对象&{data中的}    、  [对象1，对象2] "

  :class='[class1,class2]' 其中class是data中的变量class1:"style1"

   注：其中的对象指属性

动态绑定样式

?

1 2 3 4 5 6 7 8

<div :class="[isActive ？class1 ：class11  , class2]"></div> //根据某个条件切换样式用三元表达式 //[ , ] 逗号隔开样式   //动态切换 <div :class="{class1:isActive,  class2:isActive}"></div>   注：isActive 也可以是computed来的。

3 scoped

父元素的样式会渗透到子元素，那么子元素在包一层便可解决问题