1.双向绑定指令(v-modle)
双向绑定:
1. 数据改变后,呈现的页面结果会更新
2. 页面结果更新后,数据也会随之而变
作用:给表单元素(input、radio、select)使用,双向绑定数据,可以快速 获取或设置表单元素内容
语法:v-model="变量"
需求:使用双向绑定实现以下需求
1. 点击登录按钮获取表单中的内容
2. 点击重置按钮清空表单中的内容
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
账户:<input type="text" v-model="username"><br><br>
密码:<input type="password" v-model="password"><br><br>
<button @click="login">登录</button>
<button @click="reset">重置</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
username:'',
password:''
},
methods:{
login(){
console.log(this.username,this.password)
},
reset(){
username='';
password=''
}
}
})
</script>
</body>
</html>
我们先把v-model段代码删掉,可以看到无论提交什么代码都不会在console显示出来
现在我们像上面代码运行,然后输入账号密码
已经成功显示出来了
2.列表渲染指令(v-for)
Vue 提供了 v-for 列表渲染指令,用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for 指令需要使用 `(item, index) in arr` 形式的特殊语法,其中:
- item 是数组中的每一项
- index 是每一项的索引,不需要可以省略
- arr 是被遍历的数组
此语法也可以遍历对象和数字
我们先创建一个数组,里面装西瓜,鸭梨和橘子,然后用v-for来遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h3>水果店</h3>
<ul>
<li v-for= "(item,index) in list"> {{item}}-{{index}}</li>
</ul>
<ul>
<li v-for= "(item) in list"> {{item}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
list:['西瓜','鸭梨','橘子']
}
})
</script>
</body>
</html>
运行结果如下所示