Vue.js火速上手第三章——Vue遍历v-for及绑定属性v-bind的用法

本文链接：https://blog.csdn.net/tangdaren2/article/details/106683173

一、在main.js中添加遍历数据cityList

var app=new Vue({
		el: '#app',
		data:{
			cityList:[
				{
					name:'Beijing',
					tel:010,
					price:60000,
					discount:0.95,
				},
				{
					name:'Shenyang',
					tel:024,
					price:20000,
					discount:0.98,
				},
				{
					name:'Dalian',
					tel:0411,
					price:30000,
					discount:0.99,
				},
			],
		}
	}
);

二、在html中添加v-for指令

<div id="app">
			<ul>
				<li v-for="city in cityList">
					{{city.name}}：{{city.tel}}，房价{{city.price}}，
					打折后{{city.price*city.discount}}
				</li>
			</ul>		
</div>

三、浏览器验证

四、在html中给href和class添加v-bind指令

<a v-bind:href="url"  v-bind:class="class1">点击</a><br>

在main.js中添加

url:'http://www.baidu.com',
class1:'btn',

在浏览器可以看到“点击”链接，可跳转到百度首页。

五、给<a>标签添加颜色

在<head>中添加

		<style type="text/css">
			.active{
				background-color: yellow;
			}
		</style>


<a v-bind:href="url"  v-bind:class="{active:isActive}">点击</a>

在main.js中添加isActive变量

isActive:true,

在浏览器端可以看到“点击”按钮，黄色背景色。

六、灵活使用v-bind

所有的v-bind:xx标签都可以省略的写成:xx

七、本章完整代码

index代码如下

<html>
	<head>
		<title>chapter3</title>
		<style type="text/css">
			.active{
				background-color: yellow;
			}
		</style>
	</head>
	<body>		
		<div id="app">
			<ul>
				<li v-for="city in cityList">
					{{city.name}}：{{city.tel}}，房价{{city.price}}，
					打折后{{city.price*city.discount}}
				</li>
			</ul>		
			<a v-bind:href="url"  v-bind:class="class1">
				<img v-bind:src="img"/>		
			</a><br>
			<a :href="url"  :class="{active:isActive}">
				点击
			</a>
		</div>
		<script src="lib/vue.js"></script>
		<script src="js/main.js"></script>
	</body>
</html>

main.js代码如下：

var app=new Vue({
		el: '#app',
		data:{
			cityList:[
				{
					name:'Beijing',
					tel:010,
					price:60000,
					discount:0.95,
				},
				{
					name:'Shenyang',
					tel:024,
					price:20000,
					discount:0.98,
				},
				{
					name:'Dalian',
					tel:0411,
					price:30000,
					discount:0.99,
				},
			],
			url:'http://www.baidu.com',
			img:'http://zhaopin.epicc.com.cn/zhaopin/images/logo.gif',
			class1:'btn',
			isActive:true,
		}
	}
);

效果如下：