Vue.js v-bind 列表中的图 image inside li


化石原创文章,转载请注明来源并保留原文链接


使用Vue.js,做列表的时候非常方便,一般只要一个v-for加上相应的模板,就可以为开发者省下巨量的代码时间,比如:

<ul id="newVehicleList" style="background-color: grey; list-style-type: none; padding-left: 0;">
	<template v-for="item in items">
		<li style="width:25%; float:left;">
			<img v-bind:src="item.picture" style="display: block;">
			<button>配置</button>
			<button>详细信息</button>
		</li>
	</template>
</ul>

上面的代码,只要写一个<li>的模版,我们就可以通过代码加入数据,就能控制列表的增加或者减少。

例子中,列表的每个项都是一张图加上两个按钮。这个图的src值需要在数据中得到,因此我们使用了v-bind。然后每个image的真正路径,是数据中的picture数据指定。所有的数据通过Vue的items得到,每个item中必须含有picture字段。对应的Vue代码如下:

$('#newVehicleLayout').load('./view/mainPage/vehicleNew.html', function () {
	var vehicleList = new Vue({
		el: '#newVehicleList',
		data: {
			items: [
				{ message: 'Foo', picture: 'image/baojun.jpg' },
				{ message: 'Foo', picture: 'image/kylin.jpg' },
				{ message: 'Foo', picture: 'image/zhijun.jpg' },
				{ message: 'Foo', picture: 'image/hydai.jpg' },
				{ message: 'Foo', picture: 'image/alpha.jpg' },
				{ message: 'Foo', picture: 'image/geruisi.jpg' },
				{ message: 'Foo', picture: 'image/ix25.jpg' },
				{ message: 'Foo', picture: 'image/baojun.jpg' },
			],
		}
	});
});

化石原创文章,转载请注明来源并保留原文链接


发表评论

电子邮件地址不会被公开。 必填项已用*标注