<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>style内联样式</title>
</head>
<body>
<div id="app">
<div>一段内容(默认,不加任何样式)</div>
<div style="font-size: 20px;color:red">一段内容(添加样式)</div>
<div v-bind:style="{fontSize:'20px',color:'blue'}">一段内容(加样式)</div>
<div v-bind:style="{color:activeColor,fontSize:fontSize1 + 'px'}">一段内容(有样式)</div>
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
activeColor: 'lightblue',
fontSize1:25
}
});
</script>
</body>
</html>
vue-入门实例5-7.html
原创
©著作权归作者所有:来自51CTO博客作者虾米大王的原创作品,请联系作者获取转载授权,否则将追究法律责任

提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
5-Docker实例-安装httpd
5-Docker实例-安装httpd
centos apache docker -
5-Docker实例-安装redis
5-Docker实例-安装redis
redis docker Redis -
vue-入门实例7-1-5.html
【代码】vue-入门实例7-1-5.html。
html servlet dreamweaver vue.js Vue -
vue-入门实例5-5.html
【代码】vue-入门实例5-5.html。
css javascript html 背景色 -
vue-入门实例7-1.html
【代码】vue-入门实例7-1.html。
javascript vue.js 前端 html Vue -
vue-入门实例2-7.html
【代码】vue-入门实例2-7.html。
javascript 前端 vue.js html Vue -
vue-入门实例5-3.html
【代码】vue-入门实例5-3.html。
css javascript html vue.js -
vue-入门实例5-9.html
【代码】vue-入门实例5-9.html。
vue.js javascript 前端 css html -
vue-入门实例5-2.html
【代码】vue-入门实例5-2.html。
css javascript html vue.js -
vue-入门实例5-5-2.html
【代码】vue-入门实例5-5-2.html。
css html css3 背景色 -
vue-入门实例5-4.html
【代码】vue-入门实例5-4.html。
javascript css html 背景色 -
vue-入门实例2-5.html
【代码】vue-入门实例2-5.html。
javascript 前端 vue.js html css -
vue-入门实例5-1.html
【代码】vue-入门实例5-1.html。
css javascript html vue.js -
vue-入门实例5-6.html
【代码】vue-入门实例5-6.html。
css javascript html 背景色 -
vue-入门实例5-8.html
【代码】vue-入门实例5-8.html。
javascript vue.js 前端 html css -
vue-入门实例10-5.html
【代码】vue-入门实例10-5.html。
vue.js javascript 前端 html Vue -
vue-入门实例9-5.html
【代码】vue-入门实例9-5.html。
vue.js javascript 前端 html Vue -
vue-入门实例1-4-7.html
【代码】vue-入门实例1-4-7.html。
javascript vue.js 前端 html Vue -
vue-入门实例7-2-2.html
【代码】vue-入门实例7-2-2.html。
javascript 前端 vue.js sed html