用法就是在style中使用关键方法 v-bind()，vue回去实例里找到对象变量并加入style变量中。
在前面版本中可能是
<style vars="{ color }">这样。
新版是如下：
<script>
export default {
data() {
return {
color: red
};
}
};
</script>
<style>
.box {
background: v-bind("color");
}
</style>
这东西用途在哪里？
- 其一，做动态主题肯定是可行这块没有太多值得说的。
- 其二，我想说的是它可以减少
<template>\<script>中的计算属性使其各执其职
在vue2中里可能会有如下操作
案例一
使用 :style 动态改变其样式。
<template>
<div class="about" :style="{ width: size + 'px', height: size + 'px' }">
<span>This is an about page</span>
</div>
</template>
<script>
export default {
data() {
return {
size: 100
};
},
mounted() {
setInterval(() => {
this.size = Math.floor(Math.random() * 500) + 100;
}, 1 * 1000);
}
};
</script>
<style>
.about {
width: 100px;
height: 100px;
background: red;
}
</style>
案例二
使用 compute 计算属性触发其样式
<template>
<div class="about" :style="aboutStyle">
<span>This is an about page</span>
</div>
</template>
<script>
export default {
data() {
return {
size: 100
};
},
computed: {
aboutStyle() {
return {
width: this.size + "px",
height: this.size + "px"
};
}
},
mounted() {
setInterval(() => {
this.size = Math.floor(Math.random() * 500) + 100;
}, 1 * 1000);
}
};
</script>
<style>
.about {
width: 100px;
height: 100px;
background: red;
}
</style>
但这一切在Vue3你可以~
- 你可以不用写两份默认值
<template>\<script>中减少不必要的样式状态
<template>
<div class="about">
<span>This is an about page</span>
</div>
</template>
<script>
export default {
inject: ["theme"],
data() {
return {
size: 100
};
},
mounted() {
setInterval(() => {
this.size = Math.floor(Math.random() * 500) + 100;
}, 1 * 1000);
}
};
</script>
<style scoped>
.about {
width: v-bind(size + "px");
height: v-bind(size + "px");
background: v-bind("theme.color");
}
</style>
语法上值得的注意
可以使用如下几种方式😊:
<template>
<div class="text">hello</div>
</template>
<script>
export default {
data() {
return {
color: "red",
font: {
size: "2em",
},
view: {
size: 100
}
}
},
compute: {
width() {
return this.view.size;
}
}
}
</script>
<style>
.text {
color: v-bind(color);
font-size: v-bind('font.size');
width: v-bind(width + "px");
height: v-bind(`${view.size}px`);
}
</style>
绝不可以☹️:
<style>
.text {
height: v-bind("view.size" + "px");
}
</style>
