Vue 设置style样式
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样式的更多相关文章
- 013——VUE中多种方式使用VUE控制style样式属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue学习(九) 使用内联样式设置style样式
/html <div id="app"> //对象就是无序键值对的集合 <h1 :style="{ color:red, 'font-weight':2 ...
- js DOM 节点树 设置 style 样式属性
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- vue elment.style样式修改(第三方组件自生成元素)
参考:https://blog.csdn.net/dcxia89/article/details/80402490 https://blog.csdn.net/jianglibo102 ...
- Vue 设置style属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 设置class样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue设置全局样式变量 less
1.第一步: npm install sass-resources-loader --save-dev 2.然后在build 的utils.js中exports.cssLoaders = functi ...
- style设置/获取样式的问题 和 offsetWidth/offsetHeight的问题
style设置/获取样式的问题:1.js通过style方法 --加样式:加的是行间样式 oDiv.style.width="20"+'px'; --取样式:取得是行间样 ...
- 在vue中scss通过scoped属性设置局部变量如何设置框架样式
应用场景:在使用vue的大型单页应用页面中,我们可以通过使用scoped属性将当前组件的样式设置局部样式 界面被scoped局部化之后,不能覆盖界面里面的子组件样式,因为样式只对当前界面生效.(可以加 ...
随机推荐
- CentOS7 升级Python2.x到3.x
CentOS 7 中默认安装了 Python,版本比较低(2.7.5),为了使用新版 3.x,需要对旧版本进行升级.由于很多基本的命令.软件包都依赖旧版本,比如:yum.所以,在更新 Python 时 ...
- Web API 跨域
1. NuGet下载## microsoft.aspnet.webapi.cors 2 . Web API 路由中 config.EnableCors(new EnableCorsAttribute( ...
- 综述类文章(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 ...
- String源码分析
前言:String类在日常开发过程中使用频率非常高,平时大家可能看过String的源码,但是真的认真了解过它么,笔者在一次笔试过程中要求写出String的equals方法,瞬间有点懵逼,凭着大致的理解 ...
- [RK3399] 修改移动网络默认为4G
CPU:RK3399 系统:Android 7.1 现在手机卡都默认是 4G 网路,但是源码中默认的还是 3G网络,每次都要手动改到 4G. 下面在源码中就直接将默认网络改为4G. PREFERRED ...
- thymeleaf 与shiro 整合错误
错误 @Override protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principals) { // ...
- centos上安装Python并修复yum
date: 2019-07-01 18:09:53 author: headsen chen notice: 个人原创 1,安装python3.7: yum install zlib-devel b ...
- connections java.net.BindException: Address already in use_解决方案
一.问题描述 在Linux服务器(CentOS7系统)中配置并启动JMeter远程监控服务器资源所需的ServerAgent目录下的 startAgent.sh 文件时,系统出现异常提示,如 [roo ...
- Linux 验证当前 Video0 不否是v4l设备 linux v4l 编程(1) Video 4 Linux 简介
#include <stdio.h> #include <string.h> #include <errno.h> #include <sys/types.h ...
- 源码搭建LAMP环境
需要准备的安装包以及下载地址(只是一个大概地址,版本和下载方式需要自行选择): Apache http://httpd.apache.org/ httpd主程序包(http server) MySQ ...