初学VUE，VUE数据绑定和一些简单操作
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <!-- 导入包 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .red { background-color: red; } .yellow { background-color: yellow; } </style> </head> <body> <div id="dates"> <!-- v-On绑定事件 可以简写为@ --> <input type="button" @click="GetColor()" value="初始学" /> <!-- 插值表达式 若class有多个的话 我们可以用数组来表示--> <!--v-bind绑定属性的时候 可以简写为 ： --> <h1 v-bind:title="value" :class="vueclass[classsindex]">{{value}} </h1> </div> </body> <script> var date = new Vue({ el: "#dates", data: { value: "初学VUE", vueclass:['yellow','red'], classsindex:0, getcount:0 }, methods:{ GetColor(){ //当方法写在methods里面的时候，this获取的是当前的VUE对象，若不是的话，卸载VUE里面的话获取的是当前window对象 this.classsindex=++this.getcount%2; console.log( this.classsindex); //date.$el获取当前挂载的对象也就是获取#dates console.log(date.$el); //由于vue数据绑定是异步的，所以当我们直接获取挂载对象的时候可能获取到的是数据改变之前的值 // date.$nextTick相当于当数据全部更新后调用 date.$nextTick(console.log(date.$el)); } } }) </script> </html>