Vue学习（MVVM、入门练习）-学习笔记
生活随笔
收集整理的這篇文章主要介紹了
Vue学习（MVVM、入门练习）-学习笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- Vue學習（MVVM、入門練習）-學習筆記
- 入門實例
Vue學習（MVVM、入門練習）-學習筆記
入門實例
<!DOCTYPE html> <html> <head><title></title><link rel="stylesheet" type="text/css" href="css/index.css"/><script type="text/javascript" src='js/vue.js'></script><script type="text/javascript" src='js/axios.js'></script><script type="text/javascript" src='js/tab.js'></script> </head> <body><div id="my"><!--默認寫法--><ul class="tab-tit"><li v-bind:class="n==1?'active':''" v-on:click="action(1)">{{n}}標題一</li> <li :class="n==2?'active':''" @click="n=2">標題二</li><li :class="n==3?'active':''" @click="n=3">標題三</li><li :class="n==4?'active':''" @click="n=4">標題四</li></ul><div class="tab-con"><div v-if="n==1">內容一</div><div v-show="n==2">內容二</div><div v-show="n==3">內容三</div><div v-show="n==4">內容四</div></div><!--數組寫法--><ul class="tab-tit"> <li v-for="(v,index) in title" :class="n==index?'active':''" @click="n=index">{{v}}</li></ul><div class="tab-con"><div v-for="(c,i) in content" v-if="n==i">{{c}}</div></div><!--數組對象寫法--><ul class="tab-tit"> <li v-for="(v,index) in lists" :class="n==index?'active':''" @click="n=index">{{v.title}}</li></ul><div class="tab-con"><div v-for="(c,i) in lists" v-if="n==i">{{c.content}}</div></div><!--動態數據寫法--><ul class="tab-tit"> <li v-for="(v,index) in items" :class="n==index?'active':''" @click="n=index">{{v.name}}</li></ul><div class="tab-con"><div v-for="(c,i) in items" v-if="n==i">{{c.con}}</div></div></div></body> </html> window.onload = function(){var vm = new Vue({el:"#my", //element元素data:{ //數據 響應式數據n:1, //數據驅動 設置一個變量來控制title:['標題1','標題2','標題3','標題4'],content:['內容1','內容2','內容3','內容4'],lists:[{title:'a',content:'a1'},{title:'b',content:'b1'},{title:'c',content:'c1'},{title:'d',content:'d1'},{title:'e',content:'e1'},],items:[]},methods:{ //方法action:function(i){this.n = i;},getItems(){var that = this; //局部定義axios({method:'get', //類型url:'http://localhost:3333/get_tablist'}).then(res=>{console.log(res);console.log(this); //windowthis.items = res.data.result; //賦值渲染}).catch(function(error){})}},mounted(){ //生命周期鉤子函數 表示掛載完成this.getItems();}}) }總結
以上是生活随笔為你收集整理的Vue学习（MVVM、入门练习）-学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： TS基础2（泛型、枚举、元组）-学习笔记
- 下一篇： Vue学习（入门实例、常用指令）-学习笔