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:'',color:'red'},{id:2,name:'百度',url:'',color:'blue'},{id:3,name:'美团',url:'',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>
