Vuejs学习笔记(一)-8.动态绑定style属性

v-bind:style用途：动态绑定一些CSS内联样式。

demo1（对象语法）:

1.写CSS属性名方式1，如fone-size，要以驼峰方式写：fontSize

2.样式的值如果非引用，则需要使用单引号

3.样式的值如果是从其他处导入，则需要使用变量来存储

 

 

 

代码如下：

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 04-v-bindstyles object.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/6/30 22:22
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>04-v-bind 样式绑定 对象方式</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2 :style="{fontSize:'30px',color:'red'}">{{ message }}</h2>
20   <h2 :style="{fontSize:finalSize+'px',color:finalColor}">{{ message2 }}</h2>
21 </div>
22 
23 <script src="../js/vue.js"></script>
24 <script>
25 
26   const app = new Vue({
27     el: '#app',
28     data: {
29       message: 'hello',
30       message2: 'vuejs',
31       finalSize:100,
32       finalColor:'green'
33     }
34   })
35 </script>
36 </body>
37 </html>

Demo2:数组语法（使用场景，可以能多个style分开定义，然后某个标签需要使用多个style）

 

 代码如下：

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 05-v-bind array.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/6/30 23:07
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>05-v-bind 动态绑定数组的语法</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2 :style="[baseStyle1,baseStyle2]">{{ message }}</h2>
20 </div>
21 <script src="../js/vue.js"></script>
22 <script>
23 
24   const app = new Vue({
25     el: '#app',
26     data: {
27       message: 'hello',
28       baseStyle1:{backgroundColor:'red'},
29       baseStyle2:{fontSize:'100px'}
30     },
31   })
32 </script>
33 </body>
34 </html>

 

 

 

 

posted @ 2021-06-30 23:12  kaer_invoker  阅读(231)  评论(0)  编辑  收藏  举报