vue小白教程：数据绑定（一）

下面是vue中所定义的变量

export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg: '你好vue',
          title:'我是一个title',
          url:'https://www.itying.com/themes/itying/images/logo.gif',
          h:'<h2>我是h2</h2>',
          list:['1111','2222','3333'],
          flag:false,
         boxWdith:500
        }
      }
    }

1. 绑定数据第一种方法

<h2>{{msg}}</h2>
<div v-bind:title="title">鼠标瞄上去看一下</div>

2. 绑定数据第二种方法

<div v-text="msg"></div>

3. 循环数据绑定

<ul>
    <li v-for="item in list">
        {{item}}
    </li>
</ul>

4. 绑定属性

<img v-bind:src="url" />
<img :src="url" />

5. 绑定HTML

<div v-html="h"> </div>

6. 绑定style

<div class="box" v-bind:style="{'width':boxWdith+'px'}">
    我是另一个div
</div>