基本的标签的使用

v-bind 绑定属性

将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致”。

v-if 条件判断

v-for 遍历元素

v-for="todo in books"

v-on 交互的事件监听

<button v-on:click="reverseMessage">逆转消息</button>


var app5 = new Vue({
  el: '#app-5', //元素选择器
  data: {
    message: 'Hello Vue.js!'    //绑定的数据
  },
  methods: {
    reverseMessage: function () {   //监听回调函数
      this.message = this.message.split('').reverse().join('')
    }
  }
})

v-model 双向绑定

<input v-model="message">

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容