<!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>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- v-bind动态绑定style之对象语法 -->
<!-- 语法 :style="{color: currentcolor, fontsize: fontSize + 'px'}"
■style后 面跟的是一个对象类型
➢对象的key是Css属性名称
➢对象的value是具体赋的值,值可以来自于data中的属性 -->
<div id="app">
<h2 :style="{color:'red'}">{{food}}</h2> <!--此时在页面上西瓜的颜色变为了红色-->
<!-- 此处的样式 red必须加上单引号,否则会当作变量去解析,会报错 -->
<h2 :style="{color:food1}">{{food}}</h2> <!--此时在页面上西瓜的颜色变为了绿色-->
<!-- 此时food1就是一个变量,所以不需要添加引号 -->
<h2 :style="{color:food1,fontSize:size}">{{food}}</h2><!--此时在页面上西瓜的颜色变为了绿色,大小变为了30px-->
<h2 :style="sty()">{{food}}</h2> <!--此时在页面上西瓜的颜色变为了绿色,大小变为了30px-->
</div>
</body>
<script>
const app = new Vue({
el:'#app',
data:{
food:'西瓜',
food1:'green',
size:'30px'
},
methods: {
sty(){ //使用一个方法,通过返回值的方式来为其添加样式
return {color:this.food1,fontSize:this.size}
}
}
})
</script>
</html>
v-bind动态绑定style之对象语法
最新推荐文章于 2024-03-17 12:22:11 发布