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. CentOS7 升级Python2.x到3.x

    CentOS 7 中默认安装了 Python,版本比较低(2.7.5),为了使用新版 3.x,需要对旧版本进行升级.由于很多基本的命令.软件包都依赖旧版本,比如:yum.所以,在更新 Python 时 ...

  2. Web API 跨域

    1. NuGet下载## microsoft.aspnet.webapi.cors 2 . Web API 路由中 config.EnableCors(new EnableCorsAttribute( ...

  3. 综述类文章(Peng 等)阅读笔记Cross-media analysis and reasoning: advances and directions

    综述类文章 Cross-media analysis and reasoning: advances and directions Yu-xin PENG et al. Front Inform Te ...

  4. String源码分析

    前言:String类在日常开发过程中使用频率非常高,平时大家可能看过String的源码,但是真的认真了解过它么,笔者在一次笔试过程中要求写出String的equals方法,瞬间有点懵逼,凭着大致的理解 ...

  5. [RK3399] 修改移动网络默认为4G

    CPU:RK3399 系统:Android 7.1 现在手机卡都默认是 4G 网路,但是源码中默认的还是 3G网络,每次都要手动改到 4G. 下面在源码中就直接将默认网络改为4G. PREFERRED ...

  6. thymeleaf 与shiro 整合错误

    错误 @Override protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principals) { // ...

  7. centos上安装Python并修复yum

    date: 2019-07-01  18:09:53 author: headsen chen notice: 个人原创 1,安装python3.7: yum install zlib-devel b ...

  8. connections java.net.BindException: Address already in use_解决方案

    一.问题描述 在Linux服务器(CentOS7系统)中配置并启动JMeter远程监控服务器资源所需的ServerAgent目录下的 startAgent.sh 文件时,系统出现异常提示,如 [roo ...

  9. Linux 验证当前 Video0 不否是v4l设备 linux v4l 编程(1) Video 4 Linux 简介

    #include <stdio.h> #include <string.h> #include <errno.h> #include <sys/types.h ...

  10. 源码搭建LAMP环境

    需要准备的安装包以及下载地址(只是一个大概地址,版本和下载方式需要自行选择): Apache http://httpd.apache.org/  httpd主程序包(http server) MySQ ...