Vue 条件渲染双向绑定

news2024/11/15 8:04:50

https://www.dedao.cn/ebook/reader?id=5lZOKpMGr9mgdOvYa6Ej75XRo1NML3jx810k8ZVzb2nqPpDxBeJlK4AyQ8RPQv2z

v-if实现条件渲染的功能。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>loginDemo</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="Application" style="text-align: center;">
        <h1>{{title}}</h1>
        <div v-if="noLogin">Account:
            <input v-model="userName" type="text">
        </div>
        <div v-if="noLogin">Password:
            <input v-model="password" type="password">
        </div>
        <div v-on:click="click" style="border-radius: 30px;
                width: 100px;
                margin: 20px auto;
                color: black;
                background-color: grey;
                ">{{buttonTitle}} </div>
    </div>
    <script>
        const App = {
            data() {
                return {
                    title: "欢迎：未登录",
                    noLogin: true,
                    userName: "",
                    password: "",
                    buttonTitle: "登录"
                }
            },
            methods: {
                click() {
                    if (this.noLogin) {
                        this.login()
                    } else {
                        this.logout()
                    }
                },
                login() {
                    if (this.userName.length > 0 && this.password.length > 0) {
                        alert(`userName:${this.userName}`);
                        this.noLogin = false;
                        this.title = `欢迎: ${this.userName}`;
                        this.buttonTitle = "退出";
                        this.userName = "";
                        this.password = "";
                    } else {
                        alert("请输入账号和密码");
                    }
                },
                logout() {
                    this.noLogin = true;
                    this.title = `欢迎： 未登录`;
                    this.buttonTitle = "登录";
                }
            }
        }
        Vue.createApp(App).mount("#Application")
    </script>

</body>

</html>

运行结果：