:style简介

官网使用
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。

使用语法

基础语法比较简单：

<div :style="{ color: colorlet }">
    miss you
</div>

data() {
    return {
      colorlet: "green",
    };
},

上面是对部分属性进行修改，也可以对整个对象进行修改：

<div :style="styleObject"></div>
data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

还有一种数组语法也是可以使用的：

<div :style="[baseStyles, overridingStyles]"></div>

background-color属性和background-image（URL）属性

上面演示的都是没有出现连字符的属性，如果遇到像background-color这种情况，上面语法需要修改吗？

如图所示，这个background-color并没有识别为一个属性，可以将属性用引号进行包裹：

<div :style="{ 'background-color': colorlet }">
    miss you
</div>

先回顾一下background-image的基本用法：

.roomdiv {
  width: calc(18vh);
  height: calc(20vh);
  margin-left: calc(1vh);
  background-image: url("../../assets/imgs/findcontent/1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

上面这是一种情况，如果我们相对background-image属性进行动态绑定呢？这里有个URL，想对URL进行动态绑定可以直接使用刚刚方法吗？如下代码：

  <div :style="{ 'background-image': 'url(' + backgroundurl + ')' }" class="roomdiv">
  </div>
  <div :style="{ 'background-image': 'url(backgroundurl)' }" class="roomdiv">
  </div>
  
  backgroundurl: "../../assets/imgs/findcontent/1.jpg",

如图所示，很遗憾没有生效。我们可以这么做，先引入图片模块，然后定义导入，最后在template中进行使用。代码如下所示：

import imgUrltemp from '../../assets/imgs/findcontent/4.jpg'
data() {
    return {
      backgroundurl: "../../assets/imgs/findcontent/1.jpg",
      img: imgUrltemp,
    };
  },

<div :style="{ 'background-image': 'url(' + img + ')' }" class="roomdiv">
</div>

效果如上图出现背景的图片所示。

src属性

刚刚简单介绍了背景图中的URL使用，这里顺便讲一下image中src的用法。正常情况下我们引入一张图片是这么使用的;

 <img src="../../assets/imgs/findcontent/3.jpg" alt="">

如果我们想使用vue中的属性对src进行动态绑定，很自然的想到这么写：

 <img :src="{ backgroundurl }" alt="">

但很遗憾的是这种写法不能达到我们想要的目的。我们可以尝试这么写：

<img :src="require('../../assets/imgs/findcontent/' + imgUrl)" alt="">

最后放上代码运行的效果图

从左到右依次是正常固定引用、错误动态引用、正确动态引用。

vue中style的URL属性和SRC属性

:style简介

使用语法

background-color属性和background-image（URL）属性

src属性