v-bind动态绑定style
v-bind动态绑定style(对象方式)
v-bind可以动态绑定style的属性,格式为:style="{key(属性名):value(属性值)},此处要注意属性值是否带引号,带引号时为字符串,不带引号时vue会认为它是一个变量。
代码介绍,通过修改vue中的data中的值来动态修改页面要显示的字的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="app">
<!-- 动态绑定style格式: style="{key(属性名):value(属性值)}" -->
<h2 class="title" :style="{fontSize:finalSize+'px',color:finalColor}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',//挂载要管理的元素
data:{
message:'hello,vue!',
finalSize:50,
finalColor:'red'
}
})
</script>
</body>
</html>
v-bind动态绑定style(数组方式)
v-bind使用数组方式动态绑定style使用较少,用法为:先在vue实例data部分写好要使用的样式,然后在要使用v-bind动态绑定之处使用数组绑定,数组中包括vue中已定义好的样式名。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="app">
<!-- 动态绑定style格式: style="{key(属性名):value(属性值)}" -->
<h2 class="title" :style="[style1,style2]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',//挂载要管理的元素
data:{
message:'hello,vue!',
style1:{fontSize:'50px'},
style2:{color:'red' }
}
})
</script>
</body>
</html>