目录
1.何为style
1.1 style属性的作用
提供了一种改变所有的HTML元素的样式的通用的方法，通过HTML样式，可以通过style属性直接将样式添加到HTML元素，也可以间接地在独立文件种（css文件）进行定义。
在写CSS属性名的时候，我们可以用两种方式:
- 我们可以使用驼峰式（camelCase）,比如fontSize
- 或者短横线分割（注：用单引号括起来），比如'font-size'
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>1.2 style属性可以放在几个位置
1）一般最常用的是放在head标签里
<html>
<head>
<style>
</style>
</head>
<body>
</body>
</html>2）也可作为属性放在元素的开始标签中，每个属性用;隔开
<html>
<head>
</head>
<body>
<h2 style="{color:red; 'text-align':center}">这是一个标题</h2>
</body>
</html>2.v-bind绑定style好处
有时候需要动态绑定style属性，这种情况下在<style></style>标签中写死不方便动态修改。
<html>
<head>
</head>
<body>
<!--Vue绑定 v-bind:style,这里使用语法糖-->
<div id="app">
<h2 :style="{fontSize: finalSize}">这是一个标题</h2>
</div>
<script src='../vue/vue.js'></script>
<script>
const app = new Vue({
el: "#app",
data: {
finalSize: '100px',
}
})
</script>
</body>
</html>3.如何利用v-bind绑定style
两种方式：
- 对style动态绑定对象
- 对styel动态绑定数组
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
