- 用Vue写一个列表案例，页面布局什么的dom，不需要自己事先全部排好，而是通过li遍历，把数据遍历出来；
- 先定义好div标签，
- li根据数组的长度datalist进行遍历，
- 图片的链接要用“：”，属性绑定都需要加上“：”
- 图片限制它一个长度的尺寸就可以了，整张图片就会按照这个比例自动的变大或者变小，不会变形
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue.global.js"></script>
<style>
li{
display: flex;
/* width: 500px; */
justify-content: space-around;
margin-top: 20px;
}
li img{
width: 100px;
}
</style>
</head>
<body>
<div id="box">
<input type="checkbox" v-model="isAll" @change="handleAllCheck()">全选/全不选
<ul>
<li v-for="(item,index) in datalist" :key="item.id">
<input type="checkbox" v-model="checkList" :value="item" @change="handleItemCkecked">
<img :src="item.pic">
<div>
<div>商品:{
{item.name}}</div>
<div style="color: red;">价格:{
{item.price}}</div>
</div>
<div>
<button @click="item.number--" :disabled="item.number===1">-</button>
<span>{
{item.number}}</span>
<button @click="item.number+&