06-v-for指令&v-model指令
1、v-for指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
v-for: 作用：用来在vue页面中实现对vue中定义数据的遍历
语法：直接在对应标签上使用v-for指令
a、遍历队形：v-for="value,key,index in data中的变量"
b、遍历数组
c、遍历数组对象：v-for="item,index in data中的变量名"
-->
<div id="app">
<h3>遍历对象</h3>
<span v-for="value,key,index in user">{{value}}{{key}}{{index}}</span>
<h3>遍历数组</h3>
<ul>
<li v-for="item,index in schools">{{item}}{{index}}</li>
</ul>
<h3>遍历数组里的对象</h3>
<table border="1" width="100%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr v-for="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</table>
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
user:{id:21,name:"小陈",age:23,salary:23000.23},
schools: ["天津校区", "河南校区", "北京校区"],
users:[
{id:111, name:"小明", age: 23},
{id:112, name:"小红", age: 24},
{id:113, name:"小强", age: 25},
]
}
});
</script>
2、v-model指令的使用
v-model双向绑定缩写:model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!--
v-bind:绑定 作用：用来将html标签的属性进行绑定，交给vue实例管理，除了value属性以外的所有属性
v-model：模型 作用：用来将HTML标签的value属性进行绑定，交给vue实例管理 主要用在表单元素上，最能体现双向绑定机制
-->
<input type="text" v-model="msg">
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
msg:"hello vue111"
},
methods: {
}
});
</script>
3、v-model作用域表单元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<form action="#">
用户名：<input type="text" v-model="user.username"><br>
密码：<input type="text" v-model="user.password"><br>
邮箱：<input type="text" v-model="user.email"><br>
<input type="button" v-on:click="reg" value="提交">
</form>
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data:{
// username:"",
// password:"",
// email:""
user:{}
},
methods:{
reg(){
console.log(this.user.username)
console.log(this.user.password)
console.log(this.user.email)
}
}
});
</script>
浙公网安备 33010602011771号