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 2653][国家集训队]middle

    传送门 Description 一个长度为\(n\)的序列\(a\),设其排过序之后为\(b\),其中位数定义为\(b[n/2]\),其中\(a,b\)从\(0\)开始标号,除法取下整. 给你一个长度 ...

  2. commit 没有提交图片,但是出现了commit的修改

    .gitignore里面写上 image/cache/  就好了

  3. 【MyEclipse初级】Web项目的访问路径更改

    背景:MyEclipse 开发的Web项目,发布Web项目到Tomcat,从浏览器访问路径配置和工程名称一致,思考是否可以自定义访问虚拟路径. 目标:修改访问Web项目的虚拟路径 步骤:工程名右键-& ...

  4. Hive中导入Oracle数据错误:Listener refused the connection with the following error: ORA-12505

    问题: 今天往Hive中导入Oracle数据的时候碰到了如下错误:Listener refused the connection with the following error: ORA-12505 ...

  5. linux内核中的__cpu_suspend是在哪里实现的呀?

    1. 内核版本 4.19 2. 在arch/arm/kernel/sleep.S中实现如下: /* * Save CPU state for a suspend. This saves the CPU ...

  6. sql注入攻击的预防函数-如何防御sql注入

    1.预编译 2.捆绑变量各种过滤 用到的函数: addslashes  htmlspecialchars  mysql_escape_string($string) mysql_real_escape ...

  7. [webpack]解决报错 CleanWebpackPlugin is not a constructor

    错误写法 const CleanWebpackPlugin = require("clean-webpack-plugin"); 正确写法: let {CleanWebpackPl ...

  8. 原生app是什么意思?

    原生的就是用 Android 和ios 写的 完全符合手机系统 其他的都是通过各种工具对代码转换为手机系统可以识别

  9. python下multiprocessing和gevent的组合使用

    python下multiprocessing和gevent的组合使用 对于有些人来说Gevent和multiprocessing组合在一起使用算是个又高大上又奇葩的工作模式. Python的多线程受制 ...

  10. VS2015编译GDAL库出现宏重复定义 snprintf: 宏重定义

    E:\OpenSourceGraph\gdal-1.10.0\gdal\port      cpl_config.h   20行 #define HAVE_VPRINTF 1#define HAVE_ ...