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. Java学习日记基础篇(八) —— 二进制、位运算、位移运算

    二进制 二进制是逢2进位的进位置,0,1是基本算符 原码反码补码 在基本数据类型那里,有详细解释 二进制的最高位数是符号位:0表示整数,1表示负数 正数的原码,反码,补码都一样 负数的反码 = 它的原 ...

  2. ubuntu video and audio

    推荐你直接安装ubuntu-studio系统.里面有默认安装了很多多媒体软件,主要集中在4个方面1.音频编辑:Jack, Ardour, Audacity, Qtractor. Hydrogen, Y ...

  3. 【译】Solr in Action 第二章

    2.1 2.2 2.3 基本废话 2.4 基本废话

  4. vue - 设置全局html背景

    需求 有时候有些组件需要全局设置body背景,有些不需要在组件中设置就行了 解决思路 1. 全局设置可以是html,body,这里大家可以试一下,这两个只要其中一个设置了background,另一个的 ...

  5. Vuex 通俗版教程告诉你Vuex怎么用

    写在文前: 最近一直在用vue开发项目,写来写去就是那么些方法,对于简单的项目一些常用的vue方法足以解决,但是涉及到页面状态,权限判断等一些复杂的传值,vuex是必须的.对于vuex也运用一段时间, ...

  6. android DownloadManager: java.lang.IllegalArgumentException: Not a file URI: content://

    DownloadManager 使用Uri指定下载路径Bug 使用DownloadManager 下载文件 通常写法: DownloadManager dm = (DownloadManager) g ...

  7. ISO/IEC 9899:2011 条款5——5.2.3 信号与中断

    5.2.3 信号与中断 1.函数应该被设计为它们可以被一个信号在任一时刻打断,或是被一个信号处理所调用,或是两者都发生,对于初期不发生改变,但仍然处于活动状态,调用的控制流(在中断之后),函数返回值, ...

  8. 【分类算法】K近邻(KNN) ——kd树(转载)

    K近邻(KNN)的核心算法是kd树,转载如下几个链接: [量化课堂]一只兔子帮你理解 kNN [量化课堂]kd 树算法之思路篇 [量化课堂]kd 树算法之详细篇

  9. vue+php接口

    php: <?php header('Access-Control-Allow-Origin:*'); $date = $_POST['data'];$cars=array("Volv ...

  10. linux简单命令1

    1:-rw-r--r-- 第一位"-"表示文件类型("-"文件,"d"表示目录,"|"软连接,相当win7的快捷方式) ...