Vue常用指令3(双向绑定指令/列表渲染指令)(v-modle/v-for)-优快云博客

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>

运行结果如下所示