<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<!-- https://www.cnblogs.com/crazycode2/p/8689992.html -->
<body>
<h1>test</h1>
<div id="pic">
<div v-for="(item,index) in images">
<img :src="item.imgUrl" alt="">
</div>
</div>
<div id="app">
{{ message }}
</div>
<ul class="moreLogo_bottom" id="gbodyBodyL_LSlist">
<li v-for="item in objectNews">
<a href="">{{ item.message }}</a>
<span class="date">
{{item.sdate}}
</span>
</li>
</ul>
</body>
<script>
var app = new Vue({
el: '#pic',
data: {
images: [{
imgUrl: './images/gotowayLogo.jpg'
}, {
imgUrl: './images/gotowayLogo.jpg'
}, {
imgUrl: './images/gotowayLogo.jpg'
}]
},
methods: {
greet: function() {
console.log(this.images.length);
}
}
})
app.greet();
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
var gbodyBodyL_LSlist = new Vue({
el: '#gbodyBodyL_LSlist',
data: {
objectNews: [{
message: '【优惠】做详细报告+定制网站网站建设只做详细报告+定制网站',
sdate: '09-28'
}, {
message: ' 拥有双面的不仅是人生,还有 layui。一面极简,一面丰盈。极简是视我们胜任ASP、ASP.net、PHP、SP各种开发语言',
sdate: '10-01'
}, {
message: '【推荐】网站建设只做详细报告+定制网站',
sdate: '09-28'
}, {
message: ' 我们胜任ASP、ASP.net、PHP、JSP各种开发语言',
sdate: '10-01'
}, {
message: '【推荐】网站建设只做详细报告+定制网站',
sdate: '09-28'
}, {
message: '【推荐】寻众人之力,称细节之美,寻程我们胜任ASP、ASP.net、PHP、SP各种开发语言【推荐】网站建设只做详细报告+定制网站',
sdate: '09-28'
}]
}
})
</script>
</html>
vue.js循环加载图片资源,可从后台获取图片资源
最新推荐文章于 2022-06-30 18:25:00 发布