vue 语句

1.v-if

模板文件中

<!-- Handlebars template -->
{{#if ok}}
   <h1>Yes</h1>
{{/if}}

vue中

<h1 v-if="ok">Yes</h1>
//添加else
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

//template v-if

<template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</template>

2.v-show

<h1 v-show="ok">Hello!</h1>

v-if 回创建和销毁对象，而v-show只是调用css的属性

3.v-for

（1）基本

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

Paste_Image.png

（2）可选的第二个参数

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

Paste_Image.png

（3）也可以用of语法
<div v-for="item of items"></div>
（4）<template>和for

<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>

（5）object v-for
会遍历所有的对象属性

<ul id="repeat-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})

Paste_Image.png

也可以提供第二个参数

<div v-for="(value, key) in object">
  {{ key }} : {{ value }}
</div>
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

（6）range v-for

<div>
    <span v-for="n in 10">{{ n }}</span>
</div>

Paste_Image.png

<my-component v-for="item in items"></my-component>

注意：因为组件有自己的作用域所以必须绑定参数才能传参

<my-component
   v-for="(item, index) in items"
   v-bind:item="item"
   v-bind:index="index">
</my-component>

代码示例

<div id="todo-list-example">
  <input
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Add a todo"
  >
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:title="todo"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>
Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">X</button>\
    </li>\
  ',
  props: ['title']
})
new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      'Do the dishes',
      'Take out the trash',
      'Mow the lawn'
    ]
  },
  methods: {
    addNewTodo: function () {
      this.todos.push(this.newTodoText)
      this.newTodoText = ''
    }
  }
})

Paste_Image.png

(8)顺序 :key

<div v-for="item in items" :key="item.id">
<!-- content -->
</div>

注意
受限于JavaScript以下方法可以检测数组的变化

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

下面这些不可以

vm.items[indexOfItem] = newValue
vm.items.length = newLength

解决方法

//1.
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)
//2.
example1.items.splice(newLength)

（9）遍历方法

<li v-for="n in even(numbers)">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}