vue- style行内样式
程序员文章站
2022-05-15 18:22:01
...
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.实例化vue
new 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 class、style样式绑定
下一篇： Vue style样式动态绑定