绑定内联样式可以通过绑定样式对象和样式字符串这两种方式，让指定的样式在元素上生效。两种方式都可以使用，不过第一种方式更加简单一些。毕竟拼接字符串比较容易出错。
一、边读编写，头脑清醒
<div v-bind:style="styleObject">Hello Boy! </div>,这段代码通过绑定样式对象，来渲染div。语法很简单，使用v-bind指令，用:接上要绑定的特性（属性），这里是style。尔后通过=赋值符号告诉vue,请帮我们取styleObject对象，进行赋值。
看下styleObject要怎么写？这是一个json字符串，第一属性定义字体颜色为红色；第二个属性定义了字体大小为24像素。
styleObject:{
color:'red',
fontSize:'24px'
}
完整代码，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Class与Style绑定</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--自定义页面样式，学习环境这样写；正式项目最好，将样式分离出去。-->
<style type="text/css" rel="stylesheet">
</style>
</head>
<body>
<div id="app">
<div v-bind:style="styleObject">Hello Boy! </div>
</div>
</body>
</html>
<script type="text/javascript">
var vm =new Vue({
el:"#app",
data:{
//直接绑定样式对象
styleObject:{
color:'red',
fontSize:'24px'
}
}
})
</script>
PS：赶紧来写一写，尝试一下吧！骚年！
网友评论