vue 属性绑定

参数绑定

在script中的data()数据中的 数据键值可以通过{{obj}}直接引用

数据迭代

在标签中通过

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

可以对可迭代对象进行迭代输出

引入上一个迭代数据的迭代输出 可以进行迭代嵌套

<li v-for = "news in item.list2"  :key ="news">{{news}}</li>

要尽量在当前元素中用v-bind指令绑定一个key属性,这样Vue才会识别不同批次的网页元素,避免位置错乱

绑定html

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

绑定样式class

<p v-bind:class="{'red':true}">1111</p>
    <p v-bind:class="{'red':flase}">1111</p>
    <p v-bind:class="{'red':flase,'blue':true}">1111</p>
    <ul>
      <li v-for="(item,key) in list" :key="(item,key)" :class="{red:key==0,blue:key==1}">
        {{item}}
      </li>
    </ul>

绑定风格style

<div class="box"  :style="{'width':boxwdith + 'px','height':boxheight + 'px'}">这是一个BOX</div>