vue单向绑定和双向绑定

最新推荐文章于 2024-05-03 14:30:30 发布

wuhuhuan

最新推荐文章于 2024-05-03 14:30:30 发布

阅读量217

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qwerty55555/article/details/133913128

版权

vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、单向绑定就是：修改视图，数据不变；修改数据（app.name="1234"），视图会变

二、双向绑定：修改视图，数据会变；修改数据，视图会变

demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model表单数据双向绑定</title>
</head>
<body>
    <!--
        下面情况是：单向绑定
        单向绑定就是：修改视图，数据不变；修改数据（app.name="1234"），视图会变
    -->
    <div id="app">
        <input :value="name">
        <span>{{name}}</span>
        <br>
         <!--
        双向绑定：修改视图，数据会变；修改数据，视图会变
    -->
        <input :value="name" @input="output">
        
        <!--等价写法如下-->
        <!--<input :value="name" @input="event=> name=event.target.value">  -->
        <span>{{name}}</span>
        <br>
        <!--
            v-model
            双向绑定：修改视图，数据会变；修改数据，视图会变
        -->
        <input v-model="name">
        <span>v-model:{{name}}</span>

    </div>
   
    
    <script src="./node_modules/vue/dist/vue.global.js"></script>
    <script type="text/javascript">
        const {createApp} = Vue;
        const app = createApp({
            data(){
                return {
                    name:"测试"
                }
            },
            methods:{
                output(event){
                    console.log("输入的值为：",event.target.value);
                    this.name=event.target.value;//将输入框的值赋值给视图。
                }
            }
        }).mount("#app");
        console.log("app:",app);
    </script>
</body>
</html>