1. 动态绑定style样式注意点

通过短横杠(-)连接的属性名都要转为驼峰形式，例：font-size要变成fontSize；
如果直接写样式属性的值，需要用引号引起来，例：fontSize: ‘16px’

2. 动态绑定style样式的几种写法

1. 对象形式写法

style样式中属性的值可以在data中定义，也可以直接写。

<template><div><h2 :style="{ fontSize: size + 'px', color: fontColor }">Hello World</h2><h2 :style="styleObj">Hello World</h2><h2 :style="{ fontSize: '30px', color: '#ff0000' }">Hello World</h2></div>
</template><script>
export default {data() {return {size: 30,fontColor: '#ff0000',styleObj: {fontSize: '30px',color: '#ff0000'}};},
};
</script>

2. 数组形式写法

数组形式写法就是把一组一组的样式放到一起。

<template><div><h2 :style="[{ fontSize: '30px', color: '#ff0000' }, { fontStyle: 'italic' }]">Hello World</h2><h2 :style="styleArr">Hello World</h2></div>
</template><script>
export default {data() {return {styleArr: [{fontSize: '30px',color: '#ff0000'},{fontStyle: 'italic'}]};},
};
</script>

3. 三元运算符判断添加

<template><div><h2 :style="flag ? 'font-size: 30px' : '10px' ">Hello World</h2><h2 :style="{ fontSize: flag ? '30px' : '10px' }">Hello World</h2><h2 :style="[{ fontSize: flag ? '30px' : '10px' }]">Hello World</h2></div>
</template><script>
export default {data() {return {flag: true};},
};
</script>

Vue中动态绑定style样式写法相关推荐

Vue中动态绑定class样式
动态绑定class样式 1. 字符串写法语法: :class="className" 适用范围: 样式的类名不确定,需要动态指定. 举例说明: 点击一个元素更改其绑定的类名. & ...
vue中绑定style样式的方式
vue中绑定样式的方式有多种下面就来看看吧开始之前先准备一些样式 css样式 <style>.red {color: red}.green {color: green}.big {fo ...
vue中，scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 deep和important的写法
vue中,scss样式的三种写法--当前页面直接定义.@import引入样式.main.js引入公共样式 & deep和important的写法 1.安装scss # 安装node-sass ...
vue中a的href写法
vue中a的href写法注意点:href前面要加":"或者v-bind: 2.字符串要用单引号" ' "包住加上了冒号是为了动态绑定数据,等号后面可以写变量 ...
vue中动态绑定背景图, 图片水平垂直居中
vue中动态绑定背景图,并且使宽高不等的图片水平垂直居中外层父元素固定宽高,让图片垂直居中的方法 <div style="width:200px;height:200px;" ...
Vue中的style标签的lang=“ “和scpoed属性
Vue中的style 的lang=" "和scpoed属性普通的 style 标签只支持普通的样式,如果想要启用 scss 或 less ,需要为 style 元素,设置 lan ...
Vue中动态添加class写法动态静态clas混合
Vue中动态添加class写法动态静态clas混合示例 //fx,cont-block为静态class ob为动态class <div :class="[ 'fx','cont- ...
vue 中动态绑定class 和 style的方法
先列举一些例子 :class="['content',{'radioModel':checkType}]" :class="['siteAppListDirNode',{ ...
vue中慎用style的scoped属性
" 在vue组件中,在style标签上添加scoped属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的,这是一个非常好的机制.但是为什么要慎用呢?在实际业务中我们往往会对公 ...

Vue中动态绑定style样式写法

1. 动态绑定style样式注意点

2. 动态绑定style样式的几种写法

1. 对象形式写法

2. 数组形式写法

3. 三元运算符判断添加

Vue中动态绑定style样式写法相关推荐

最新文章

热门文章