Vue指令

vue会根据不同的指令，针对标签实现不同的功能；

指令：带有v-前缀的特殊标签属性

v-model

作用：给表单元素使用，双向数据绑定——>可以快速获取和设置表单内容。

        1、数据变化—>视图自动更新

        2、视图更新—>数据自动更新

语法：v-model="数据"

<template>
    <h1>指令标签v-model</h1>
    账号：<input type="text" v-model="username"><br>
    密码：<input type="password" v-model="password"><br>
    </template>
    <script>
    export default {
        data(){
            return {
               username: "",
               password: ""
            }
        }
    }
    </script>

 

实现登录重置功能

<template>
    <h1>指令标签v-model</h1>
    账号：<input type="text" v-model="username"><br>
    密码：<input type="password" v-model="password"><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
    </template>
    <script>
    export default {
        data(){
            return {
               username: "",
               password: ""
            }
        },
        methods:{
            login(){
                //双向联动关系.直接拿就可以
                console.log(`账号：${this.username}, 密码：${this.password}`);
        },
        reset(){
            this.username = "";
            this.password = "";
        }
    }
}
    </script>