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. [bzoj 4872][六省联考2017]分手是祝愿

    传送门 Description N个灯按照1~N标号,按下一个开关i,所有标号是i的约数的开关都改变状态,目标是关掉所有的灯,如果当前最优策略≤k就直接按照最优策略走.否则随机按下一个开关.给出每个灯 ...

  2. 【caffe编译】nvcc warning:The 'compute_20', 'sm_20'

    Makefile.config 中 CUDA_ARCH := -gencode arch=compute_20,code=sm_20 \ -gencode arch=compute_20,code=s ...

  3. Buuctf pwn1 详细wp

    目录 程序基本信息 程序溢出点 确定返回地址 编写exp脚本 成功getshell 程序基本信息 我们可以看到这是一个64程序,没有保护开启. 程序溢出点 gets函数可以读取无限字符,存在栈溢出. ...

  4. MSP与PSP

    摘抄自Triton.zhang——eeworld 1. MSP和PSP 的含义是Main_Stack_Pointer 和Process_Stack_Pointer,在逻辑地址上他们都是R13 2. 权 ...

  5. 使用oid2name列出数据库和对应的oid

    [postgres@postgre base]$ ll total 172 drwx------ 2 postgres postgres 12288 Dec 6 09:21 1 drwx------ ...

  6. word中英文双引号的样式区分与替换技巧

    https://jingyan.baidu.com/article/3f16e003147ea42590c10349.html 场景:一篇word文档中,想要全选更改字体,使得中文全部为“宋体”,英文 ...

  7. ios 新建app iphone 、 ipad or universal ?

    很久没有关注这个新建app的  时候 选什么的问题了, 因为我们一般在公司 都是 已经建立好的app 直接 在那上面开发. 所以很久不建立新app 遇到新的app需要你自己去创建的时候 可能就会 有突 ...

  8. 32Flutter仿京东商城项目 用户中心页面布局

    import 'package:flutter/material.dart'; import 'package:flutter_jdshop/services/ScreenAdapter.dart'; ...

  9. 123457123457#0#-----com.cym.shuXueWangGuo1--前拼后广--儿童数学

    123456123456#1#-----com.cym.shuXueWangGuo1--前拼后广--儿童数学

  10. 123457123457#0#-----com.yuming.drawGame01--前拼后广--儿童画画游戏

    com.yuming.drawGame01--前拼后广--儿童画画游戏