vue 绑定属性 绑定Class 绑定style

  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>

原文地址：https://www.cnblogs.com/Spinoza/p/10008691.html