vuejs tab选项切换,数据用get方式获取
vue-resource.js 获取方式<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>html代码<div id="dynamic-component-demo"><button...
·
vue-resource.js 获取方式
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
html代码
<div id="dynamic-component-demo">
<button
v-for="tab in tabs"
v-bind:key="tab"
v-bind:class="['tab-button', { active: currentTab === tab }]"
v-on:click="currentTab = tab"
>{{ tab }}</button>
<keep-alive>
<component
v-bind:is="currentTabComponent"
class="tab"
></component>
</keep-alive>
</div>
vuejs代码
var childPosts = {
data: function () {
return {
posts: [
{
id: 1,
title: 'Cat Ipsum'
},
{
id: 2,
title: 'Hipster Ipsum'
},
{
id: 3,
title: 'Cupcake Ipsum'
}
],
ajaxdata:[null],
taburl:['/json/1.1.1.json','/json/1.1.2.json','/json/1.1.3.json'],
selectedPost: 'Cat Ipsum'
}
},
created:function(){
this.getData(this.taburl[0])
},
methods:{
getData:function(url){
this.$http.get(url).then(function(res){
this.ajaxdata = res.body;
},function(){
console.log('请求失败处理');
});
},
selectClick:function(post,index){
this.selectedPost = post
var taburl = this.taburl[index];
this.getData(taburl);
}
},
template: `
<div class="posts-tab">
<ul class="posts-sidebar">
<li
v-for="(post,index) in posts"
v-bind:key="post.id"
v-bind:class="{ selected: post === selectedPost }"
v-on:click="selectClick(post,index)"
>
{{ post.title }}
</li>
</ul>
<div class="selected-post-container">
<div
v-if="selectedPost =='Cat Ipsum'"
class="selected-post"
>
<div class="pass-contain" v-for="(item,index) in ajaxdata">
<a class="link-href" :href="\'documentdetail-manage.html?dockey=\'+item.Record.key" target="_blank">{{item.Record.title}}</a>
<span>{{item.Record.date}}</span>{{item.Record.enterprise}}
</div>
</div>
<div
v-else-if="selectedPost"
class="selected-post"
>
<div class="pass-contain" v-for="(item,index) in ajaxdata">
<a class="link-href" :href="\'documentdetail-manage.html?dockey=\'+item.Record.key" target="_blank">{{item.Record.title}}</a>
<span>{{item.Record.date}}</span>{{item.Record.enterprise}}
</div>
</div>
</div>
`
}
var childArchive = {
template: '<div>Archive component</div>'
}
new Vue({
el: '#dynamic-component-demo',
data: {
currentTab: 'Posts',
tabs: ['Posts', 'Archive']
},
computed: {
currentTabComponent: function () {
return 'tab-' + this.currentTab.toLowerCase()
}
},
components:{
"tab-posts":childPosts,
"tab-archive":childArchive
}
})
main.js 的代码
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'bootstrap3/dist/css/bootstrap.css'
import './assets/css/ledger.css'
// import '../static/css/AdminLTE.min.css'
import '../static/css/dataTables.bootstrap.min.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
Vue.prototype.$ajax = axios
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
axios方式(建议用此方法获取数据)
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
getData:function(url){
var _this = this;
axios.get(url).then(function(response){
_this.ajaxdata = response.data;
}).catch(function (error) {
console.log(error);
});
},
或者
getData:function(url){
axios.get(url)
.then(function(response){
this.ajaxdata = response.data;
}.bind(this))
.catch(function (error) {
console.log(error);
});
},
或者箭头函数
getData:function(url){
axios.get(url)
.then((response) => {
this.ajaxdata = response.data;
})
.catch(function (error) {
console.log(error);
});
},
有待改进,记录一下
更多推荐
已为社区贡献4条内容
所有评论(0)