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. .Net类库 压缩文件 与 Ionic.Zip 批量压缩不同目录文件与解压 文件

    using System; using System.IO; using System.IO.Compression; using System.Linq; using System.Text; us ...

  2. mysql触发器个人实战

    create trigger idtriggerbefore insert on flow_management_copy1for each ROWBEGIN SET new.ID= CONCAT(R ...

  3. 感知机模型到DNN模型

    参考资料 感知机模型:https://www.cnblogs.com/pinard/p/6042320.html DNN:https://www.cnblogs.com/pinard/p/641866 ...

  4. c++ homework 1

    先交作业(急促) 电梯作业 elevator (不知道为啥,我BIN文件夹建立不了.) PTA练习 如图 如图

  5. PHP fopen/file_get_contents与curl性能比较

    PHP中fopen,file_get_contents,curl 函数的区别: 1.fopen/file_get_contents 每次请求都会重新做 DNS 查询,并不对 DNS 信息进行缓存. 但 ...

  6. [java]三种自定义链表排序方式

    代码: import java.util.ArrayList; import java.util.Comparator; import java.util.List; class Emp{ Strin ...

  7. 7个最好的Java机器学习开发库

    摘要:现如今,拥有深度学习和机器学习领域的技术是科技界的趋势之一,并且企业则希望雇佣一些拥有良好的机器学习知识背景的程序开发工程师.本文将介绍一些目前流行的.强大的基于Java的机器学习库,希望给大家 ...

  8. vue 引入公共css文件

    1.在入口js文件main.js中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue'import App from './App' // 引入App这个组件impo ...

  9. JS pc端和移动端共同实现复制到剪贴板功能实现

    JS pc端和移动端实现复制到剪贴板功能实现 在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了, ...

  10. 算法习题---4.3救济金发放(UVa133)

    一:题目 (n< )个人站成一圈,逆时针编号为1~n.有两个官员,A从1开始逆时针数,B从n开始顺时针数.在每一轮中,官员A数k个就停下来,官员B数m个就停下来(注意有可能两个官员停在同一个人上 ...