<!--引入对应的文件既可运行成功！-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<title>Document</title>
<style type="text/css">
.btn-default{
display: inline-block;
}
</style>
</head>
<body>
<div class="container" id="row-slt">
<div class="btn-group" role="group" aria-label="...">
<!--<button type="button" @click="myfunc()" class="btn btn-default">获取数据</button>-->
<button type="button" @click="deletemyfunc()" class="btn btn-default">删除</button>
</div>
<div class="row" >
<div class="col-xs-6 col-md-3" v-for="rowlst in rowls">
<a target="_blank" :href="rowlst.href" class="thumbnail">
<img :src="rowlst.src" >
<p>{{rowlst.wenzi}}</p>
</a>
</div>
</div>
</div>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script type="text/javascript">
/*vue的个人理解，
* methods里面的函数可以赋值到data里的变量数组
* mounted里可以调用methods里面的函数
*/
var vm = new Vue({
el:'#row-slt',
data:{
rowls:[]
},
mounted: function(){
this.myfunc();
},
methods:{
myfunc:function(){
//发送get请求
this.$http.get('js/vuejson.json').then(function(res){
let i;
let anima = res.body.animals;
for(i in anima){
this.rowls.push(anima[i]);
}
},function(){
console.log('请求失败处理');
});
},
deletemyfunc:function(){
this.rowls.pop()
}
}
})
</script>
</body>
</html>