引用vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
创建一个实例
<script type="text/javascript">
var vm = new Vue({
el: '#test1',
data: {
shops: [{
"shop_name": "abc",
"shop_address": "123",
"imgurl": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548843675715&di=ad328beb6256c799e11c2273c85c1071&imgtype=0&src=http%3A%2F%2Ffd.topitme.com%2Fd%2Fb7%2F03%2F1120513656acc03b7dl.jpg"
},
{
"shop_name": "zxc",
"shop_address": "1234",
"imgurl": ""
},
{
"shop_name": "lalala",
"shop_address": "1234",
"imgurl": ""
}
]
},
created: function () {
this.getList();
}, //实例创建时被调用
methods: {
getList: function () {
}
}
})
</script>
- el是绑定ID
- data是数据组，shops内可以是json数组
- methods是实例函数执行
网页部分代码
<div id="test1">
<li v-for="shop in shops">
<div>
<h1>{{shop.shop_name}}</h1>
<p>{{shop.shop_address}}</p>
<img v-bind:src="shop.imgurl" />
</div>
</li>
</div>
