1.3
6. v-bind指令
作用：设置元素的属性（比如：src,title,class）
代码实例：
<!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="../js/vue.js" ></script>
</head>
<body>
<div id="app">
<img src="../img/lagou.jpg" />
<!-- 使用v-bind设置src属性值 -->
<img v-bind:src="imgSrc" alt="" />
<!-- 简写 设置title -->
<img :src="imgSrc" :title="imgTitle" />
<!-- 设置class -->
<div :style="{fontSize: size + 'px'}">v-bind指令</div>
</div>
</body>
<script>
var obj = new Vue({
el: "#app",
data: {
imgSrc: "../img/lagou.jpg",
imgTitle: "我好看吗",
size: 50,
},
});
</script>
</html>v-bind指令总结：
- v-bind指令的作用是：为元素绑定属性
- 完整写法v-bind:属性名，可以简写:属性名
7. v-for指令
作用：根据数据生成列表结构
- 相当于java里的for循环
代码示例：
<!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="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="增加人员信息" v-on:click="add" />
<input type="button" value="删除人员信息" v-on:click="remove" />
<h2 v-for="item in city">城市:{{item}}</h2>
<h2 v-for="(item,index) in city">序号:{{index}} 城市:{{item}}</h2>
<ul>
<li v-for="(item,index) in people">{{index}}编号：{{item.num}}姓名：{{item.name}}年龄：{{item.age}}</li>
</ul>
</div>
</body>
<script>
var obj = new Vue({
el: "#app",
data: {
city: ["上海", "北京", "贵州"],
people: [
{ num: "007", name: "小李飞刀", age: "22" },
{ num: "003", name: "马艳三", age: "18" },
{ num: "010", name: "王菲", age: "33" },