vue2.0+基础知识连载（04）--- 绑定style样式
2018-01-19 11:15
706 查看
<!DOCTYPE html>
<html>
<head>
<title>vue2.0+基础知识连载（04）--- 绑定style样式</title>
</head>
<body>
<h3>vue2.0+基础知识连载（04）--- 绑定style样式</h3>
<div id='app'>
<h5>方式一 ：对象1</h5>
<p :style="{'font-size': '30px', 'color':'blue', 'background-color': 'yellow'}">测试的文字 <span>当属性名含有连字符时，属性名要加引号,不然无法解析，直接报错</span></p>
<p :style="{fontSize: '30px', color:'blue', backgroundColor: 'yellow'}">测试的文字 <span>当属性名含有连字符时，也可以把连字符改成相应的驼峰式,不然无法解析，直接报错</span></p>
<hr>
<h5>方式二 ：对象2</h5>
<p :style="styleObj">测试的文字</p>
<hr>
<h5>方式三 ：数组 </h5>
<p :style="[fs, c, bg]">测试的文字</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
data: {
/**
* 方式一：对象1：直接写在html里
*/
/**
* 方式二：对象2：写在data里
*/
styleObj: {
fontSize: '30px',
color: 'blue',
backgroundColor: 'red'
},
/**
* 方式三：数组
*/
fs: {fontSize: '30px'},
c: {color: 'red'},
bg: {backgroundColor: 'blue'},
}
}).$mount('#app');
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vue2.0+基础知识连载（05）--- 绑定class样式
- VUE2.0 全套 demo 讲解 基础 5（class 与 style 绑定）
- vue2.0+基础知识连载（07）--- 事件对象
- vue2.0+基础知识连载（10）--- 键盘事件
- vue2.0+基础知识连载（14）--- 局部组件与全局组件
- vue2.0+基础知识连载（09）--- 默认事件
- vue2.0+基础知识连载（16）--- 非父子组件通信
- vue2.0+基础知识连载（03）--- 常用属性介绍
- vue2.0+基础知识连载（17）--- 路由
- vue2.0+基础知识连载（01）--- Vue实例简介
- vue2.0+基础知识连载（18）--- 动画（transition）
- vue2.0+基础知识连载（19）--- 自定义指令
- vue2.0+基础知识连载（20）--- 自定义键盘信息
- vue2.0+基础知识连载（11）--- 生命周期
- vue2.0+基础知识连载（12）--- 监听数据变化
- vue2.0+基础知识连载（13）--- 计算属性的使用
- Class 与 Style 绑定内联样式(vue.js)
- vue-router 2.0 常用基础知识点之router-link
- vue-router 2.0 常用基础知识点之router.push()
- vue.js学习笔记之绑定style样式和class列表