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局部化之后,不能覆盖界面里面的子组件样式,因为样式只对当前界面生效.(可以加 ...
随机推荐
- Spring Cloud Gateway(四):路由定义定位器 RouteDefinitionLocator
本文基于 spring cloud gateway 2.0.1 1.简介 RouteDefinitionLocator 是路由定义定位器的顶级接口,它的主要作用就是读取路由的配置信息(org.spri ...
- ES6---修饰器
类的修饰 许多面向对象的语言都有修饰器(Decorator)函数,用来修改类的行为.目前,有一个提案将这项功能,引入了 ECMAScript. @testable class MyTestableCl ...
- Nginx之URL重写(rewrite)配置
Nginx URL重写(rewrite)配置及信息详解1)if判断指令 语法为if(condition){…} #对给定的条件condition进行判断.如果为真,大括号内的rewrite指令 ...
- C++的面向对象的Dijkstra写法
C++的面向对象的Dijkstra写法 面向对象特点的充分使用 清晰的逻辑 简洁的图输入 程序 面向对象特点的充分使用 清晰明确的类实现 class Edge(边的实现) class Req (路由请 ...
- 学号 20175313 《Android程序设计》实验报告
目录 一.实验内容 (1)Android Stuidio的安装测试 (2)Activity测试 (3)UI测试 (4)布局测试 (5)事件处理测试 二.实验步骤 (1)Android Stuidio的 ...
- Git git rm和git rm --cached
git rm 和 git rm --cached 的区别 git rm file git commit -m "xxx" git push origin master 删除本地及仓 ...
- chrome浏览器备忘
记录日常使用Chrome遇到的问题. audio控件播放音频问题 打开http://www.cdfive.com,发现音乐没有自动播放,F12打开控制台发现有如下报错: Uncaught (in pr ...
- PyTorch Tutorials 5 数据并行(选读)
%matplotlib inline 数据并行(选读) Authors: Sung Kim and Jenny Kang 在这个教程里,我们将学习如何使用 DataParallel 来使用多GPU. ...
- 你的Node应用,对接分布式链路跟踪系统了吗?(一) 原创: 金炳 Node全栈进阶 4天前 戳蓝字「Node全栈进阶」关注我们哦
你的Node应用,对接分布式链路跟踪系统了吗?(一) 原创: 金炳 Node全栈进阶 4天前 戳蓝字「Node全栈进阶」关注我们哦
- 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...