1.直接添加行内样式

2.通过绑定设置style样式

3.将vue的属性设置为样式

4将多个vue属性设置为样式

<div id="box">
<!--直接添加样式-->
<p style="background-color: blue;">sssss</p>
<!--绑定样式-->
<p v-bind:style="'background-color: red;'">sssss</p>
<!--将vue中的属性作为样式设置-->
<p :style="obj">sssss</p>
<!--将多个属性作为样式设置-->
<p :style="[obj,obj1]">sssss</p>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
data:{
obj:{
backgroundColor:"gold"
},
obj1:{
fontSize: "30px"
}
},
});
</script>

Vue 设置style样式的更多相关文章

  1. 013——VUE中多种方式使用VUE控制style样式属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. vue学习(九) 使用内联样式设置style样式

    /html <div id="app"> //对象就是无序键值对的集合 <h1 :style="{ color:red, 'font-weight':2 ...

  3. js DOM 节点树 设置 style 样式属性

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. vue elment.style样式修改(第三方组件自生成元素)

    参考:https://blog.csdn.net/dcxia89/article/details/80402490         https://blog.csdn.net/jianglibo102 ...

  5. Vue 设置style属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue 设置class样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue设置全局样式变量 less

    1.第一步: npm install sass-resources-loader --save-dev 2.然后在build 的utils.js中exports.cssLoaders = functi ...

  8. style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题

    style设置/获取样式的问题:1.js通过style方法    --加样式:加的是行间样式 oDiv.style.width="20"+'px';    --取样式:取得是行间样 ...

  9. 在vue中scss通过scoped属性设置局部变量如何设置框架样式

    应用场景:在使用vue的大型单页应用页面中,我们可以通过使用scoped属性将当前组件的样式设置局部样式 界面被scoped局部化之后,不能覆盖界面里面的子组件样式,因为样式只对当前界面生效.(可以加 ...

随机推荐

  1. Ubuntu 14.04 indigo 相关依赖

    sudo apt-get install libbullet-dev sudo apt-get install ros-indigo-bfl sudo apt-get install libsdl-d ...

  2. Java中BigDecimal的equals与compareTo的区别

          有个是否为零的判断[BigDecimal.ZERO.equals(ratio)]我用了BigDecimal的equals方法,结果,判断失败,因此特地分析一下equals与compareT ...

  3. zabbix(10)自动发现规则(low level discovery)

    1.概念 在配置Iterms的过程中,有时候需要对类似的Iterms进行添加,这些Iterms具有共同的特征,表现为某些特定的参数是变量,而其他设置都是一样的,例如:一个程序有多个端口,而需要对端口配 ...

  4. 隐藏tr

    <tr id="yinchang" style="display: none"></tr>     $("#yinchang& ...

  5. 使用Python调用Zabbix API

    Zabbix API官方文档: https://www.zabbix.com/documentation/4.0/zh/manual/api 1.向 api_jsonrpc.php 发送HTTP_PO ...

  6. label设置渐变时不显示纯英文纯数字字符串

    提出问题: 当对UILabel设置渐变color时,有点小问题.即:text为中文或中英混合字符串时显示正常,纯英文字符串不显示!!!   剖析问题: 经搜索了解到:在显示中文时,绘制渐变color的 ...

  7. Python读写Excel文件和正则表达式

    Python 读写Excel文件 这里使用的是 xlwt 和 xlrd 这两个excel读写库. #_*_ coding:utf-8 _*_ #__author__='观海云不远' #__date__ ...

  8. chrome-添加JSON-handler插件

    1.访问http://jsonhandle.sinaapp.com/下载 2.谷歌访问   chrome://extensions/ 然后找到你下载的JSON-handle_0.5.2.crx文件,直 ...

  9. D.Dwarf Tower

    Vasya在玩一个叫做"Dwarf Tower"的游戏,这个游戏中有n个不同的物品, 它们的编号为1到n.现在Vasya想得到编号为1的物品. 获得一个物品有两种方式: 直接购买该 ...

  10. SDK/JDK,Shell/Shell脚本,Apache/APR ,MTK

    SDK 软件开发工具包(SoftwareDevelopmentKit) API(Application Programming Interface,应用编程接口)其实就是操作系统留给应用程序的一个调用 ...