详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

Vue.js提供了一些常用的内置指令，如下：

v-if指令

v-for指令

v-show指令

v-else指令

v-bind指令

v-on指令

1：v-if指令

v-if指令是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：

v-if="expression"

expression是一个返回布尔值的表达式，表达式可以是一个布尔值属性，也可以是一个返回布尔值的运算式。

Eg:

 
  Hello, Vue.js!
  Yes!
  
No!
  
Age: {{ age }}
  
Name: {{ name }}
 
 var app= new Vue({
  el: '#app',
  data: {
  yes: true,
  no: false,
  age: 20,
  name: 'lililili'
  }
 })

//数据的yes属性为true，所以"Yes!"会被输出；

//数据的no属性为false，所以"No!"不会被输出；

//运算式age >= 18返回true，所以"Age: 28"会被输出；

//运算式name.indexOf('li') >= 0返回false，所以"Name: lililili"会被输出。

V-if只能控制一个元素上的是否显隐，对于多个元素控制我们可以使用一个template元素实现

在vue中我们想使用条件模板直接在dom元素上使用v-if指令，v-if指令的值表示vue实例对象上的数据值

Tempalte是vue提供的一个自定义元素，写在这个里面的元素会根据template v-if属性来控制显隐，在渲染以后这个元素会被vue删除掉，（v-if指令元素保留）



{{title}}

详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on

Yes!

No!

Age: {{ age }}

Name: {{ name }} var app= new Vue({ el: '#app', data: { yes: true, no: false, age: 20, name: 'lililili' } })