vue- style行内样式

style行内样式

:style=“变量”
:style="{color:‘red’,width:‘100px’}"
:style="[可做三元运算判断]"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1.引入vue.js --><script src="./vue.js"></script><style>.box{width: 200px;height: 200px;border:2px solid red;}</style>
</head>
<body><!-- 2.作用域 --><div id="app"><!-- 静态行内样式书写 --><div style="background: blue;color:white;">溯洄从之,道阻且长</div><!-- 动态行内样式书写 --><div :style="{width:'200px',height:'200px',background:'aqua',color:'white'}">溯游从之,宛在水中央</div><hr><!-- 变形 --><div class="box" :style="styleN">溯游从之,宛在水中央</div><button @click="changeStyle('yellow')">变黄</button><hr><ul><li v-for="(item,index) in arr" :style="{background:item.color}"><div>{{item.name}}</div><div>{{item.url}}</div></li></ul><hr><div :style="[isSize?sizeStyle:'',isBg?bgStyle:'']">设置字体和背景</div><button @click="addSize">增加字体</button><button @click="addBg">增加背景</button></div><script>// 3.实例化vuenew Vue({el:'#app',data:{isSize:false,//是否设置尺寸isBg:false,//是否设置背景sizeStyle:{fontSize:'40px',},bgStyle:{background:'blue',},arr:[{id:1,name:'京东',url:'http://www.jd.com',color:'red'},{id:2,name:'百度',url:'http://www.baidu.com',color:'blue'},{id:3,name:'美团',url:'http://www.meituan.com',color:'yellow'},],styleN:{background:'green',color:'pink',}},methods:{changeStyle(color){this.styleN.background = color;},addSize(){this.isSize = true;},addBg(){this.isBg = true;}}})</script>
</body>
</html>

vue- style行内样式相关推荐

VUE动态绑定Css样式、Style行内样式
VUE动态绑定Css样式.Style样式一.背景这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了,因为uniapp的语法是vue的语法,所以uniapp的样式问题主要也就是vue ...
vue文件行内样式style提示插件
有时候写点demo不想写class时会偏向于写style 安装Vue Language Features (Volar) 设置 -> 搜索prevent -> 把Snippets Prev ...
vue框架行内样式添加背景图片
<div class="logo" :style="{width: concetWidth+'px',height: concetHeight+'px' , 'ba ...
angular使用innerHtml时style行内样式消失
解决方法:使用[innerHTML] html:<div [innerHTML]="value"></div> 创建一个pipe文件innerhtmlpip ...
在vue中怎么写行内样式高_13.VUE学习之控制行内样式
vue 测试一测试二测试三 var app = new Vue({ el: "#vue", data:{ red:"red", size:28, div2: ...
【Vue框架】Vue绑定样式及案例之行内样式——对象绑定样式与数组控制样式（附带源码案例)
文章目录一.Vue样式绑定 1.1 Vue绑定class样式 1.2 Vue绑定行内样式 1.2.1 对象控制绑定样式 1.2.2 数组控制绑定样式 1.3 Vue绑定样式案例(标题排他) 1.4 ...
在vue中怎么写行内样式高_vue v-bind绑定行内样式
使用 v-bind 指令去绑定行内样式,即使用 v-bind:style 或者 :style 的方式去动态绑定行内样式. style中直接定义样式下面实例中我们将直接在 v-bind:style 属 ...
23 - JavaScript 通过style对象设置行内样式
style属性的获取和修改在DOM当中,如果想设置样式,有两种形式: className(针对内嵌样式) style(针对行内样式) 这篇文章,我们就来讲一下style. 需要注意的是:style是 ...
15 Vue中子组件样式的绑定和行内样式模版编写
[基础]模板样式绑定2-进阶场景子组件的样式绑定如何区分父子组件子组件使用样式的小坑行内样式的编写场景这篇文章继续学习Vue的模板样式绑定.上篇文章你已经对Vue中的样式绑定有一个基本了 ...

vue- style行内样式

style行内样式

vue- style行内样式相关推荐

最新文章

热门文章