学习Vue.js打卡第二天！！

Crystal_qwq

已于 2024-01-09 09:26:03 修改

阅读量347

点赞数 8

文章标签：学习 vue.js 前端

于 2024-01-04 17:41:57 首次发布

本文链接：https://blog.csdn.net/m0_64498202/article/details/135392400

版权

V-model指令案例~

v-model: 给表单元素使用，双向数据绑定->可以快速获取或设置表单元素内容
数据变化<==>视图自动更新

<!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>
<!--
    v-model: 给表单元素使用，双向数据绑定->可以快速获取或设置表单元素内容
    数据变化<==>视图自动更新
-->
<body>
    
    <div id="app">
        账户：<input type="text" v-model="username"><br>
        密码：<input type="password" v-model="password"><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>