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); //window
this.items = res.data.result; //赋值渲染
}).catch(function(error){
})
}
},
mounted(){ //生命周期钩子函数 表示挂载完成
this.getItems();
}
})
}
190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
