vue.js-day05

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

v-if=”expression”

expression是一个返回bool值的表达式，表达式可以使一个bool属性，也可以返回一个bool的运算时

Vue.js 模板语法（v-html）

<div id="app">

<div v-html="message"></div>

</div>

<script>

new Vue({

el: '#app',

data: {

message: '<h1>菜鸟教程</h1>'

}

})

</script>

Vue.js 条件（v-if）

v-if v-else v-else-if
 
<div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
    
<script>
new Vue({
  el: '#app'
})
</script>
 

Vue.js 循环（v-for）
<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

Vue.js 样式绑定（v-bind）
  绑定title ，src， html，text，class，style

主要操作技能：

    v-bind:title  鼠标移上的显示

    v-bind:src  绑定图片路径

    v-bind:html 绑定HTML文本和标签

    v-bind:text 绑定文本

    v-bind:class 绑定类样式

    v-bind:style  动态绑定样式

• Vue.js 表单绑定（v-model）

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

<input v-model="message" placeholder="编辑我……">

Vue.js 事件过滤器（v-on）

<button v-on:click="greet">Greet</button>
 
methods: {
    greet: function (event) {
}