事件

最新推荐文章于 2024-03-24 09:16:44 发布

谢去非

最新推荐文章于 2024-03-24 09:16:44 发布

阅读量81

点赞数

分类专栏： vue基础文章标签： vue

本文链接：https://blog.csdn.net/ryyzxf/article/details/109385619

版权

vue基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

事件

- 双向绑定

原生js阻止冒泡和默认行为
在这里插入图片描述

在用户名逐个删除低效时，点击delete清空
在输入完密码时，点击回车提交表单。
在这里插入图片描述

双向绑定

用v-bind和v-on实现v-model
v-model的底层：
<input type=“text” :value=“res” @input=‘res=$event.target.value’>

<body>
    <div id="app">
        <h1>{{res}}</h1>
        <!-- <input type="text" name="" id="" value="" v-model='res'> -->
        <input type="text" :value="res" @input='handle'>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                res: 'hello'
            },
            methods: {
                handle(event) {
                    this.res = event.target.value;
                }
            }
        })
    </script>
</body>