vue-属性

1、属性绑定和属性的简写

v-bind 用于属性的绑定。写法：v-bind:属性=" " （简写为 :属性=" "）。

v-bind:src=" " 简写为 :src=" "

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>事件</title>
 6 <!--  引入vue-->
 7   <script src="../vue/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           url:'https://img.zcool.cn/community/010cb65e205811a80120a895cf85b3.jpg@2o.jpg',
15           w:'200rpx',
16           h:'200rpx'
17         },
18         //methods用来存储方法
19         methods:{
20           
21         }
22       })
23     }
24   </script>
25 </head>
26 <body>
27 <div id="hello">
28   <img v-bind:src="url" :width='w' :height='h'>
29 </div>
30 </body>
31 </html>

 

2、两个特殊的属性：class和style属性

 1）class属性

方式1 通过变量的形式设置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>属性</title>
 6 <!--  引入vue-->
 7   <script src="../vue/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           bb:'aa'       //将aa的值赋给bb
15         },
16         //methods用来存储方法
17         methods:{
18           
19         }
20       })
21     }
22   </script>
23   <style>
24     .aa{
25       color: red;
26       font-size: 36px;
27     }
28   </style>
29 </head>
30 <body>
31 <div id="hello">
32   <p :class='bb'>我是中国人</p>  
33 </div>
34 </body>
35 </html>

方式2 通过数组的方式设置（同时引用多个属性）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>属性</title>
 6 <!--  引入vue-->
 7   <script src="../vue/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           bb:'aa',       //将aa的值赋给bb
15           dd:'cc'
16         },
17         //methods用来存储方法
18         methods:{
19           
20         }
21       })
22     }
23   </script>
24   <style>
25     .aa{
26       color: red;
27       font-size: 36px;
28     }
29     .cc{
30       background-color: #bfa;
31     }
32   </style>
33 </head>
34 <body>
35 <div id="hello">
36   <p :class='[bb,dd]'>我是中国人</p>   
37 </div>
38 </body>
39 </html>

方式3 通过JSON的方式设置（更灵活，推荐使用）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>属性</title>
 6 <!--  引入vue-->
 7   <script src="../vue/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           flag:true, //定义变量
15           num:-2
16         },
17         //methods用来存储方法
18         methods:{
19           
20         }
21       })
22     }
23   </script>
24   <style>
25     .aa{
26       color: red;
27     }
28     .cc{
29       background-color: #bfa;
30     }
31     .dd{
32       font-size: 40px;
33     }
34   </style>
35 </head>
36 <body>
37 <div id="hello">
38   <p :class='{aa:true,cc:flag,dd:num<0}'>我是中国人</p>   
39 </div>
40 </body>
41 </html>

 方式4 通过变量引用JSON的方式设置（与方式3是一个意思）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>属性</title>
 6 <!--  引入vue-->
 7   <script src="../vue/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           flag:true, //定义变量
15           num:-2,
16           hello:{aa:true,cc:true}  //data定义hello，属性引用hello
17         },
18         //methods用来存储方法
19         methods:{
20           
21         }
22       })
23     }
24   </script>
25   <style>
26     .aa{
27       color: red;
28     }
29     .cc{
30       background-color: #bfa;
31     }
32     .dd{
33       font-size: 40px;
34     }
35   </style>
36 </head>
37 <body>
38 <div id="hello">
39   <p :class='hello'>我是中国人</p>   
40 </div>
41 </body>
42 </html>

 

 2）style属性

方式1 通过变量的形式设置单个属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>属性</title>
 6 <!--  引入vue-->
 7   <script src="../vue/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           xx:{color:'blue',fontSize:'30px'}
15         },
16         //methods用来存储方法
17         methods:{
18           
19         }
20       })
21     }
22   </script>
23   <style>
24     .aa{
25       color: red;
26     }
27     .cc{
28       background-color: #bfa;
29     }
30     .dd{
31       font-size: 40px;
32     }
33   </style>
34 </head>
35 <body>
36 <div id="hello">
37   <p :style='xx'>我是中国人</p>   
38 </div>
39 </body>
40 </html>

 

方式2 通过数组的形式设置多个属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>属性</title>
 6 <!--  引入vue-->
 7   <script src="../vue/vue.js"></script>
 8   <script>
 9     window.onload=function(){
10       new Vue({
11         el:'#hello',
12         //data用来存储数据
13         data:{
14           xx:{color:'blue',fontSize:'30px'},  
15           yy:{backgroundColor:'red'}
16         },
17         //methods用来存储方法
18         methods:{
19           
20         }
21       })
22     }
23   </script>
24   <style>
25     .aa{
26       color: red;
27     }
28     .cc{
29       background-color: #bfa;
30     }
31     .dd{
32       font-size: 40px;
33     }
34   </style>
35 </head>
36 <body>
37 <div id="hello">
38   <p :style='[xx,yy]'>我是中国人</p>   
39 </div>
40 </body>
41 </html>

 

 

 

posted @ 2021-08-24 16:36  AnnLing  阅读(66)  评论(0)    收藏  举报