vue1.0和vue2.0区分（二）

绑定一次

{{*msg}}
<div v-once>{{msg}}</div>

vue2.0已烧毁 请使用v-once

绑定html代码

{{{msg}}}
<div v-html=”msg”></div>
{{{msg}}}写法vue2.0已烧毁,请使用v-html

轮回v-for

数组

• 1.0默许经由过程value举行遍历(key,value),遍历需加track-by=”$index”(不加反复数据不绑定)

• 2.0经由过程key举行遍历(value,key)

data:{
  arr:['苹果','橘子','香蕉']
}
<ul>
  <li v-for="value in arr">
      {{value}} {{$index}}
  </li>
</ul>

{{{$index}}}写法vue2.0已烧毁

对象

data:{
    json:{name:'zfpx'}
}
<li v-for="value in json" >
    {{value}}
</li>

{{$key}}和{{$index}}vue2.0已烧毁
对象数组都可以举行解构赋值

  v-for = '(val,index) in arr'
// 2.0 必需举行定义，不然会报错

事宜v-on

<button v-on:click="addFruit($event)">按钮</button>
<ul>
    <li v-for="value in json" >
       {{value}}
    </li>
</ul>
var vue = new Vue({
    el:'#box',
    data:{
        json:['香蕉','苹果','橘子']
    },
    methods:{
        addFruit(event){
            this.json.push('苹果');
        }
    }
});

• v-on:click简写@click 2.0支撑

• 实行要领时加上()事宜源默许不通报，须要手动传入$event

• methods中的this永久指向Vue的实例

显现/隐蔽

• v-show 假如为false时经由过程css款式将元素隐蔽 (display:none/block)

<div v-show='false'></div>

• v-if 假如为false时移除DOM节点(removeChild)

<div v-if='false'></div>