vue.js初学2之vue指令①

入了个门，接下来，就要开始学一些跟vue有关的指令了

1.vue-bind指令

作用：绑定元素属性

语法：v-bind:属性

exp：

<!--html代码-->
<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

exp效果：鼠标在文字上停留一会后会出现，当前页面加载完成的时间，也就是将message中的信息绑定到了span的title中，同样对应标签有对应的属性也可以用这种方法进行绑定

2.vue-if指令

作用：根据表达式的值，用来添加/删除元素

语法：v-if=表达式（绑定的值为false就删除此元素，若为true则添加此元素）

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

exp效果：seen此时为true，则元素p可见，若将seen的值改为false，则看不到p元素

注意：v-if若为false是相当于把这个元素删掉，即在整一篇DOM文档中是找不到这个元素的

            v-if有一个对应的指令，即v-else，若值为true则删除，若值为false则添加

3.vue-show指令

作用：根据表达式的值，用来显示/隐藏元素

语法：v-show=表达式（绑定的值为false就隐藏此元素，若为true则显示此元素）

exp：

<div id="app-3">
  <p v-show="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

exp效果：seen此时为true，则元素p可见，若将seen的值改为false，则看不到p元素

注意： v-show有一个对应的指令，即v-hide，若值为true则删除，若值为false则添加

比较：v-show是将元素进行隐藏，而v-if是将元素删除，一个可寻，一个不可寻