[vue3快速入门] 13.样式控制2——style绑定

跟class绑定类似，我们在vue里动态控制一个元素的style时，最常用的也是对象的方式，例如

<div :style="{color: activeColor}"></div>

data() {
  return {
    activeColor: 'red',
  }
}

渲染的结果就是

<div style="color: red;"></div>

在css属性名中，有好多是多个单词，用短杠链接的，在绑定style时候要注意，这次属性名要写成驼峰式或者还是用短杠链接，不过要用引号括起来
例如：

<div :style="{ fontSize: large + 'px' }"></div>

或者

<div :style="{ 'font-size': large + 'px' }"></div>

data是这样的

data(){
  return{
    large: 18
  }
}

还有一个点需要注意，想font-size这种有单位的属性，写的时候别忘了后面的单位，px或者em什么的

我们再来写一个背景图片的例子，
data数据里有一个头像的url，叫做avatarURL

data(){
  return{
    avatarURL: 'http://www.test.com/avatar.jpg'
  }
}

然后我们把它绑定到一个div中，当做背景图

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

渲染的结果是

<div style="background-image: url(http://www.test.com/avatar.jpg);"></div>

下面我们写一个实际工作中可能会遇到的例子，
现在有一个标题，但是显示标题的宽度有限，要求标题字数越少时，字号越大，字数越多是，字号越小

<template>
  <h1 :style="{ fontSize: fontSize + 'px' }">{{ title }}</h1>
  <input type="text" v-model="title" />
</template>

<script>
// style绑定
export default {
  name: 'App',
  data() {
    return {
      title: '这是一个标题',
    }
  },
  computed: {
    fontSize() {
      return 30 - this.title.length // fontSize这个计算属性根据title的长度计算，长度越长，fontSize越小
    },
  },
}
</script>

<style></style>

正好也用这个例子复习了我们之前学习的input的v-model绑定，计算属性
比较生疏的小伙伴一定要动手写一写，然后通过input更改一下title的长度，就可以看到字号变化了。