1 <template id="temp1">
2 <div>
3 <ul v-for="item,index in result" >
4 <li>
5 <div class="picOpt">
6 <p class="pic">
7 <img :src="item.allPics[0]" alt="">
8 </p>
9 <p class="opt">
10 <span>编辑图片</span>
11 <span :class="[index==0?downArr:upArr]" @click="action"></span>
12 </p>
13 </div>
14 <div class="txt">
15 <h2>{{item.Title}}</h2>
16 <h3>{{item.Author}}</h3>
17 <h5>{{item.Abstract}}</h5>
18 </div>
19 </li>
20 </ul>
21 </div>
22 </template>
23 <!--content start 注意 isloading-->
24 <div class="content" id="box"> 25 <component :is="dtemp" :attritem="items" :upArr="upArr" :downArr="downArr" v-if="isloading"></component> 26 </div>
1 Vue.prototype.$ajax=axios;
2 var vm=new Vue({
3 el:'#box',
4 data:{
5 upArr:'arr up',
6 downArr:'arr down',
7 dtemp:'t1',
8 url:'dd.json',
9 items:[],
10 isloading:false
11 },
12 created:function(){
13 this.getData()
14 },
15 methods:{
16 getData:function(){
17 var vm=this
18 vm.$ajax.get(this.url)
19 .then(function(response){
20 vm.items=response.data
21 vm.isloading=true;
22 console.log(vm.items)
23 })
24
25 }
26 },
27 components:{
28 t1:{
29 props:['attritem','upArr','downArr'],
30 template:'#temp1',
31 data:function () {
32 return {
33 result:this.attritem,
34 upArr:this.upArr,
35 downArr:downArr
36 }
37 },
38 methods:{
39 action:function(){
40 console.log("hello")
41 }
42 }
43 }
44 }
45 })