vue 学习例子整理记录自学前端

最新推荐文章于 2024-04-20 18:56:45 发布

原创最新推荐文章于 2024-04-20 18:56:45 发布 · 1.6w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

26 篇文章

订阅专栏

本文档展示了如何使用Vue.js实现一个动态导航栏，通过v-for指令遍历数组中的对象并显示其属性值。具体实现了不同类型的车辆作为导航选项，如巴士、快车等。

vue 学习例子整理记录自学前端

<div id="navigator">
	<ul>
		<li v-for="tab in tabs">
			{{tab.car}}
		</li>
	</ul>
</div>

<script src="vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#navigator',
		data: {
			tabs: [
				{car: '巴士'},
				{car: '快车'},
				{car: '专车'},
				{car: '顺风车'},
				{car: '出租车'},
				{car: '代驾'}
			]
		}
	})
</script>