条件渲染（布尔型：true/false）
v-if：实现条件渲染时，直接将元素从页面删除
v-show：实现条件渲染时，在元素上添加diaplay样式进行隐藏显示的切换（推荐使用）
循环指令（对象和数组的遍历）
v-for：
- 对象的遍历
(value :值 key: 名 index:索引值 ) in 数据对象名- 顺序不可以改变
<li v-for="(value,key,index) in user" >{{index}}:{{key}}:{{value}}</li>
- 数组中对象的遍历
(item：每个数据对象: index:索引值) in 数组中的对象名- 在
tr中写v-for
<tr v-for="(item,index) in users">
代码如下
<html>
<head>
<meta charset="utf-8">
<title>循环指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- value :值 key: 名 index:索引值 -->
<div >
<ul>
<!-- 根据数据对象来选择有多少个列表 v-for -->
<li v-for="(value,key,index) in user" >{{index}}:{{key}}:{{value}}</li>
</ul>
</div>
<!-- 遍历数组 -->
<div>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<!-- item：每个数据对象 -->
<tr v-for="(item,index) in users">
<!-- 对象名.属性值 -->
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
</tr>
</table>
</div>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
// 对象
user:{
name:'憨包包',
age:22,
sex:'男',
},
//数组
users:[
{
name:'憨包包1',
age:22,
sex:'男',
},
{
name:'憨包包2',
age:22,
sex:'男',
},
{
name:'憨包包3',
age:22,
sex:'男',
},
],
},
methods:{
}
});
</script>
</body>
</html>
表单绑定: v-model（双向绑定）(绑定的是data数据的内容)
三种属性：
.lazy：文本框失去焦点时，实时同步显示
<div>
用户名：<input type="text" v-model.lazy="uname"/>{{uname}}
</div>
.number：被绑定的输出成字符串
<div>
年龄：<input type="number" v-model.number="age"/>
</div>
.trim：自动删除元素的前后的空格
<div>
密码：<input type="password" v-model.trim="password" />
</div>
此时密码框中：（空格）123 （空格）
- 绑定单选按钮：
v-model的值为同一个属性
<div>
<!--v-model的值是同一个属性 -->
性别：
<input type="radio" value="男" name="sex" v-model="sex"/>男
<input type="radio" value="女" name="sex" v-model="sex"/>女
</div>
---------------------------------------------------------------------------------------------------------------
data:{
sex: ,
}
- 绑定复选框：
v-model的值为同一个属性的数组
[ ]
<div>
<!-- 复选框 绑定方式：数组类型[] -->
爱好：
<input type="checkbox" value="1" name="hobby" v-model="hobby"/>学习
<input type="checkbox" value="2" name="hobby" v-model="hobby"/>吃饭
<input type="checkbox" value="3" name="hobby" v-model="hobby"/>睡觉
</div>
---------------------------------------------------------------------------------------------------------------
data:{
hobby:[],
}
- 绑定下拉菜单：
- v-model要写在
select标签上- 其中data中的v-model的值要写出
value相应的值
<div>
籍贯：
<select v-model="pro">
<option value="-1">----------请选择---------</option>
<option value="1">黑</option>
<option value="2">吉</option>
<option value="3">辽</option>
</select>
</div>
---------------------------------------------------------------------------------------------------------------
data:{
pro:-1,
}
代码如下：
<html>
<head>
<meta charset="utf-8">
<title>表单绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 双向绑定 -->
<!-- <div>
用户名：<input type="text" v-model="uname"/>{{uname}}
</div> -->
<div>
用户名：<input type="text" v-model.lazy="uname"/>{{uname}}
</div>
<div>
年龄：<input type="number" v-model.number="age"/>
</div>
<div>
<button type="button" @click="showInfo()">按钮</button>
</div>
<!-- <div>
密码：<input type="password" v-model="password" />
</div> -->
<div>
密码：<input type="password" v-model.trim="password" />
</div>
<div>
<!--v-model的值是同一个属性 -->
性别：
<input type="radio" value="男" name="sex" v-model="sex"/>男
<input type="radio" value="女" name="sex" v-model="sex"/>女
</div>
<div>
<!-- 复选框 绑定方式：数组类型[] -->
爱好：
<input type="checkbox" value="1" name="hobby" v-model="hobby"/>学习
<input type="checkbox" value="2" name="hobby" v-model="hobby"/>吃饭
<input type="checkbox" value="3" name="hobby" v-model="hobby"/>睡觉
</div>
<!-- 下拉菜单 写在select控件上-->
<div>
籍贯：
<select v-model="pro">
<option value="-1">----------请选择---------</option>
<option value="1">黑</option>
<option value="2">吉</option>
<option value="3">辽</option>
</select>
</div>
<div>
备注：<textarea v-model="comment"></textarea>
</div>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
uname:'',
password:'',
sex:'',
hobby:[],
pro:-1,
comment:'',
age:20,
},
methods:{
showInfo(){
console.log(typeof(this.age));
}
},
});
</script>
</body>
</html>
