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. Unrecognized syntax identifier "proto3". This parser only recognizes "proto2". ”问题解决方法

    编译cartographer时遇到Unrecognized syntax identifier “proto3”. This parser only recognizes “proto2”.排查:使用 ...

  2. nginx 动态黑名单

    原理: 根据nginx 访问日志记录发现可疑的或者不正常的访问记录记录然后自动添加到nginx的黑名单 起到阻止的作用  可以作为防范少量的ddos攻击 1.首先要格式化nginx的日志(相关内容可以 ...

  3. insomnihack CTF 2016-microwave

    目录 程序基本信息 程序漏洞 整体思路 exp脚本 内容参考 程序基本信息 程序防护全开,shellcode修改got表等方法都不太可行,同时pie开启也使程序代码随机化了. 程序漏洞 这是一个发推特 ...

  4. Vue 相关开源项目库汇总

    element ★9395 - 饿了么出品的Vue2的web UI工具套件 Vux ★6835 - 基于Vue和WeUI的组件库 vueAdmin ★569 - 基于vuejs2和element的简单 ...

  5. ps 快捷键大全

    一.工具箱(多种工具共用一个快捷键的可同时按[Shift]加此快捷键选取)矩形.椭圆选框工具 [M]移动工具 [V]套索.多边形套索.磁性套索 [L]魔棒工具 [W]裁剪工具 [C]切片工具.切片选择 ...

  6. javascript的promise

  7. ARM 之一 ELF文件、镜像(Image)文件、可执行文件、对象文件 详解

    [转]https://blog.csdn.net/ZCShouCSDN/article/details/100048461 ELF 文件规范   ELF(Executable and Linking ...

  8. 阶段5 3.微服务项目【学成在线】_day18 用户授权_01-用户授权业务流程分析

    1 用户授权业务流程 用户授权的业务流程如下: 业务流程说明如下: 1.用户认证通过,认证服务向浏览器cookie写入token( 身份令牌) 2.前端携带token请求用户中心服务获取jwt令牌 前 ...

  9. CRM-项目记录

    硬件篇 阵列R5 3个盘才能做R5阵列,还需要单独的一个SSD硬盘做系统盘 软件篇 跨域问题 SPRINGMVC 配置了跨域,也使用了跨域注解,但是依然不能解决问题 最后通过直接修改TOMCAT的WE ...

  10. Windows server 2008 R2 桌面服务器管理器打开提示:试图引用不存在的令牌

    来源:https://social.technet.microsoft.com/Forums/zh-CN/90f376a3-2b52-46c1-be34-4a2dbf4fdea2/winserver2 ...