胸怀万里世界, 放眼无限未来。这篇文章主要讲述8. Vue - v-bind 绑定 Style 对象语法和 数组语法相关的知识,希望能为你提供帮助。
之前说过 v-bind 这东西可以绑class 那么必然也可以绑定实style 了,而且 也有 对象语法 和 数组语法:
先来对象语法:
因为我们知道 对象语句是 键 - 值 对的,所以呢 我们的键是 style 的属性,值是对应的值即可,值可以是变量也可以是字符串,如果值不是Vue中的变量,值要加单引号!不然报错.
还有一个点: 比如字体大小 font-Size 其中可以省略掉-,有些版本不省略会报错的.
Vue会当做一个变量来解析.
例如我要字体大小50px 而且 字体颜色 是 红色,那么:
错误写法:
< div class="app">
< !-- 下面的是错误写法,因为VUE会把 50px 和 red 当做一个变量来解析,找不到那就报错了 -->
< p :style="fontSize: 50px,color:red"> 颜色:red 字体大小: 50 px< /p>
< /div>
正确写法:
< div class="app">
< p :style="fontSize: 50px,color:red"> 颜色:red 字体大小: 50 px< /p>
< /div>
< script>
const app = new Vue(
el:".app",
)
< /script>
,所以你的值可以是一个变量:【在Vue中的data先定义哦】
< div class="app">
< p :style="fontSize: size + px,color:fontColor"> 颜色:red 字体大小: 50 px< /p>
< /div>
< script>
const app = new Vue(
el:".app",
data:
size:50,
fontColor:"red"
)
< /script>
所以呢 绑定这个有什么用,因为响应式 用户就可以在你这里很快速选择某些样式 然后直接改变即可,复用性挺高.
数组语法:【比较不用】
因为我们知道数组是没有键值对的 所以呢我们可以直接在数组里面加Vue的变量,变量里面都定义好的数据(键值对):
< div class="app">
< p :style="[color_red,font_size]"> 颜色:red 字体大小: 50 px< /p>
< /div>
< script>
const app = new Vue(
el:".app",
data:
color_red:color:red,
font_size:fontSize:50px
)
< /script>
看代码可知道 这样的话肯定要先学对象语法,在学这玩意, 所以还不如直接用对象语法呢,
Tips:Vue中变量 定义 的键值可以有很多很多;上面定义了一个,所以主题逻辑就可以这样写了,
其次你完全也可以在数组里直接干[xxx,xx] 但很画蛇添足 没用.
作者:??咸瑜???
【8. Vue - v-bind 绑定 Style 对象语法和 数组语法】
推荐阅读
- 技术分享| 快对讲调度系统设计概要
- python爬虫-15-使用python爬取中国天气,然后将最低温排序进行绘图展示
- 客快物流大数据项目(十五)(DockeFile常用命令)
- 持续集成CI&CD之配置管理最佳实践
- Docker容器(将带UI的程序直接转为Web应用,so easy)
- Jetbrains GoLand 2021软件安装包和安装教程
- 虚拟机数据恢复Linux系统下误删除KVM虚拟机的数据恢复案例
- C#/VB.NET 将文本内容更改为大写
- openGauss安装前主机初始化