vue中的dom指令控制

一、条件控制指令
1、v-if，条件渲染

<div id="J_app">
  <p v-if="show">显示该标签</p>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    show: true
  }
})

2、template使用
template元素最终不会出现在dom中

<div id="J_app">
  <template v-if="isdisplay">
    <h1>模板标签会隐藏</h1>
    <p>模板标签会隐藏</p>
    <p>模板标签会隐藏</p>
  </template>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    isdisplay: true
  }
})

3、v-else使用

<div id="J_app">
  <div v-if="type === 'A'"> A </div>
  <div v-else-if="type === 'B'"> B </div>
  <div v-else-if="type === 'C'"> C </div>
  <div v-else> Not A/B/C </div>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    type: 'D'
  }
})

4、数据遗留

<div id="J_app">
  <template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="Enter your username">
  </template>
  <template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address">
  </template>
</div>

5、数据不遗留

<div id="J_app">
  <template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="Enter your username" key="username-input">
  </template>
  <template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address" key="email-input">
  </template>
</div>

6、v-show，条件展示

<div id="J_app">
  <p v-show="isdisplay">只是做了隐藏，元素本身没有从dom上消失</p>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    isdisplay: true
  }
})

v-show不支持template，也不支持v-else，通过是否添加display：none控制显隐，v-if的切换开销比较大。

二、循环控制指令
1、固定值

<div id="J_app">
  <span v-for="i in 10"> {{ i }} </span>
</div>

2、template使用

<div id="J_app">
  <ul>
    <template v-for="item in items">
      <li>{{ item.option }}</li>
      <li class="divider"></li>
    </template>
  </ul>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    items: [
      { option: '前进' },
      { option: '后退' },
      { option: '休息' }
    ]
  }
})

3、遍历数组

<div id="J_app">
  <ol>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ol>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    items: [
      { text: '学习 webpack' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

<div id="J_app">
  <ol>
    <li v-for="(item,index) in items">
      {{ flag }} - {{ item.index }} - {{ item.text }}
    </li>
  </ol>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    flag: "parent",
    items: [
      { text: '学习 webpack' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})
//改变原数组，数组变异
vapp.items.push({text:'学习es6'})
//返回新数组
vapp.items = vapp.items.filter(function (item) {
  return item.text.match(/学习/)
})
//修改某项
Vue.set(vapp.items, 2, { text: '学习vue，需要基础知识做铺垫'})

<div id="J_app">
  <ol>
    <li v-for="num in evenNumbers"> {{ num }} </li>
  </ol>
</div>
//显示数组过滤的副本，而不改变原来的数组
var vapp = new Vue({
  el: '#J_app',
  data: {
      numbers: [ 1, 2, 3, 4, 5 ]
  },
  computed: {
      evenNumbers: function () {
        return this.numbers.filter(function (number) {
          return number % 2 === 0
        })
      }
    }
})

<div id="J_app">
  <ol>
    <li v-for="num in even(numbers)"> {{ num }} </li>
  </ol>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
      numbers: [ 1, 2, 3, 4, 5 ]
  },
  methods: {
      even: function (numbers) {
        return numbers.filter(function (number) {
          return number % 2 === 0
        })
      }
   }
})

4、遍历对象

<ul id="J_app">
  <li v-for="value in personObj"> {{ value }} </li>
</ul>
var vapp = new Vue({
  el: '#J_app',
  data: {
    personObj: {
      firstName: 'Camille',
      lastName: 'Hou',
      age: 30
    }
  }
})
//添加sex属性到personObj对象
Vue.set(vapp.personObj,'sex','male')
//也可以用
vapp.$set(vapp.personObj,'sex','male')
//为已有对象赋予多个属性值
vapp.personObj = Object.assign({}, vapp.personObj, {
  weight: 105,
  len: '158cm'
})

<div id="J_app">
  <div v-for="(value, key) in personObj">
    {{ key }}：{{ value }}
  </div>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    personObj: {
      firstName: 'Camille',
      lastName: 'Hou',
      age: 30
    }
  }
})

<div id="J_app">
  <div v-for="(value, key, index) in personObj">
    {{ index }}、{{ key }}、{{ value }}
  </div>
</div>
var vapp = new Vue({
  el: '#J_app',
  data: {
    personObj: {
      firstName: 'Camille',
      lastName: 'Hou',
      age: 30
    }
  }
})