vue组件学习5(tab切换)

来源：互联网发布：淘宝网御龙在天激活码编辑：程序博客网时间：2024/06/06 05:28

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/vue-1.0.24.debug.js"></script>
<style>
ul,
li {
list-style: none;
}

ul {
height: 50px;
}

li {
width: 50px;
height: 30px;
float: left;
border: 1px solid #ccc;
}
.lli{
width: 100px;
height: 50px;
border: 1px solid #ccc;
}
</style>
</head>

<body>
<ul>
<li v-for="value in contentArr" @click="tabArr($index)">{{value.content}}</li>
</ul>
<div>
<sop-list :my-message="contentList">

</sop-list>
</div>
<script>
Vue.component('sop-list', {
template: "<ul><li class='lli' v-for='item in myMessage' v-text='item.content'></li></ul>",
// props:["msg"]
props:{
myMessage:{
type:Array,
default:[
{
content:'1',
},
{
content:'2',
},
{
content:'3',
},
]
}
}

});
var app = new Vue({
el: "body",
data: {
contentArr: [
{ "content": "标题1", "key": "1" },
{ "content": "标题2", "key": "2" },
{ "content": "标题3", "key": "3" }
],
contentList: [
{ "content": "标题11"},
{ "content": "标题11"},
{ "content": "标题11"}
]
},
methods: {
tabArr: function(_index) {
var _this = this;
switch(_index){
case 0: _this.contentList = [
{ "content": "标题1"},
{ "content": "标题1"},
{ "content": "标题1"}
]
break;
case 1: _this.contentList = [
{ "content": "标题2"},
{ "content": "标题2"},
{ "content": "标题2"}
]
break;
case 2: _this.contentList =[
{ "content": "标题3"},
{ "content": "标题3"},
{ "content": "标题3"}
]
break;
}
}
},

})
</script>
</body>

</html>

须要引入vue.js文件，contentList 可以根据后台返回的具体数据进行tab切换的内容进行更改

阅读全文

0 0