vue 绑定属性 绑定Class 绑定style

Posted 2021-01-22 spinoza

  1 <template>
  2 
  3 
  4   <div id="app">  
  5     
  6       <h2>{{msg}}</h2>
  7 
  8       <br>
  9 
 10       <div v-bind:title="title">鼠标瞄上去看一下</div>
 11 
 12 
 13       <img src="https://www.itying.com/themes/itying/images/logo.gif" />
 14 
 15        <br>
 16 
 17         <br>
 18        
 19        <!-- 绑定属性 -->
 20 
 21        <img v-bind:src="url" />
 22 
 23         <br>
 24         <img :src="url" />
 25 
 26         <br>
 27 
 28         <br>
 29         {{h}} 
 30 
 31 
 32         <!-- 绑定html -->
 33 
 34 
 35         <div v-html="h">
 36 
 37         </div>
 38 
 39 
 40         <!-- 绑定数据的另一种方法 -->
 41 
 42        <div v-text="msg">
 43        </div>
 44 
 45 
 46     
 47 
 48 
 49        <!-- v-bind:class  :class的使用 -->
 50 
 51 
 52        <div v-bind:class="{‘red‘:flag}">
 53 
 54         我是一个div
 55        </div>
 56 
 57     <br>
 58     <br>
 59 
 60     <div :class="{‘red‘:flag,‘blue‘:!flag}">
 61     
 62       我是另一个div
 63     </div>
 64 
 65      
 66       <br>
 67       <br>
 68       <!-- 循环数据 第一个数据高量 -->
 69       <ul>
 70         <li v-for="(item,key) in list">
 71           {{key}}---{{item}}
 72         </li>
 73       </ul>
 74       
 75         <br>
 76         <br>
 77       <ul>
 78         <li v-for="(item,key) in list"  :class="{‘red‘:key==0,‘blue‘:key==1}">
 79           {{key}}---{{item}}
 80         </li>
 81       </ul>
 82       <br>
 83       <br>
 84 
 85 
 86       <!-- v-bind:style  :style的使用 -->
 87 
 88     <div class="box" v-bind:style="{‘width‘:boxWdith+‘px‘}">
 89 
 90       我是另一个div
 91     </div>
 92       
 93 
 94   </div>
 95 </template>
 96 
 97 <script>
 98     export default {     
 99       data () {  /*业务逻辑里面定义的数据*/
100         return {
101           msg: ‘你好vue‘,
102           title:‘我是一个title‘,
103           url:‘https://www.itying.com/themes/itying/images/logo.gif‘,
104 
105           h:‘<h2>我是h2</h2>‘,
106           list:[‘1111‘,‘2222‘,‘3333‘],
107           flag:false,
108           boxWdith:500
109         }
110       }
111     }
112 </script>
113 
114 
115 <style lang="scss">
116 
117 
118   .red{
119 
120     color: red;
121   }
122   .blue{
123 
124     color:blue;
125   }
126 
127   .box{
128 
129     height: 100px;
130 
131     width: 100px;
132 
133     background: red;
134   }
135 
136 </style>