vue指令-04：v-model以及记事本案例

yinfanfff

已于 2024-03-05 15:49:04 修改

阅读量531

点赞数 9

分类专栏： vue入门学习文章标签： vue.js 前端 javascript

于 2024-03-05 11:50:25 首次发布

本文链接：https://blog.youkuaiyun.com/yinfanfff/article/details/136472752

版权

本文介绍了Vue框架中v-model指令的用法，以及如何实现表单元素的双向数据绑定，通过记事本案例展示了v-model在处理用户输入和方法调用中的应用，包括键盘事件监听和数组操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.v-model

<!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>
</head>
<body>

<div id="app">
    <!--
      v-model 可以让数据和视图，形成双向数据绑定
      (1) 数据变化，视图自动更新
      (2) 视图变化，数据自动更新
      可以快速[获取]或[设置]表单元素的内容
     -->
    账户：<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/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: '',
            password: ''
        },
        methods: {
            login () {
                console.log(this.username, this.password)
            },
            reset () {
                this.username = ''
                this.password = ''
            }
        }
    })
</script>
</body>
</html>

2.记事本案例

前端代码

<!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" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>记事本</title>
</head>
<body>

<!-- 主体区域 -->
<section id="app">
    <!-- 输入框 -->
    <header class="header">
        <h1>小黑记事本</h1>
         <!-- 当按下回车键时，触发 add 方法 -->
        <input v-model="todoName" placeholder="请输入任务" class=&