在vue中,style有3中样式绑定的方式!
1.通过v-bind指令绑定class样式,进行文字的渲染,但是这样增加了模板的负担,所以不推荐使用!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUe之computed指令</title>
</head>
<!--1.导入vue.js包 -->
<script type="text/javascript" src="js/vue.js" ></script>
<body>
<!--定义HTML元素,便于显示效果-->
<div id="in1">
<h1 :style="{'color':'red','font-size':'20px'}">{{lang}}</h1>
</div>
<script>
//实例化VUE对象 传入vue参数
var vr=new Vue({
el:"#in1",
data:{
lang:"这是一个段落"
}
});
</script>
</body>
</html>
2.这种方法的使用 明显减轻了模板的重量,推荐使用!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUe之computed指令</title>
</head>
<!--1.导入vue.js包 -->
<script type="text/javascript" src="js/vue.js" ></script>
<body>
<!--定义HTML元素,便于显示效果-->
<div id="in1">
<h1 :style="style1">{{lang}}</h1>
</div>
<script>
//实例化VUE对象 传入vue参数
var vr=new Vue({
el:"#in1",
data:{
lang:"这是一个段落",
style1:{'color':'red','font-size':'50px'},
}
});
</script>
</body>
</html>
3.多样式绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUe之computed指令</title>
</head>
<!--1.导入vue.js包 -->
<script type="text/javascript" src="js/vue.js" ></script>
<body>
<!--定义HTML元素,便于显示效果-->
<div id="in1">
<h1 :style="[style1,style2]">{{lang}}</h1>
</div>
<script>
//实例化VUE对象 传入vue参数
var vr=new Vue({
el:"#in1",
data:{
lang:"这是一个段落",
style1:{'color':'red','font-size':'50px'},
style2:{'font-weight':'300px;'}
}
});
</script>
</body>
</html>