多种方式实现双向绑定

最新推荐文章于 2024-06-13 13:54:08 发布
最新推荐文章于 2024-06-13 13:54:08 发布
阅读量560 收藏
点赞数
分类专栏： 笔记 文章标签： vue react js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45221036/article/details/107090184
版权

我们使用两种方式来实现双向绑定的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双向绑定</title>

    <!-- 原生实现双向绑定 -->
    <input id="input" type="text" />
    <div id="text"></div>

    <!-- react挂载的位置 -->
    <div id="app"></div>


    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>


    <script type='text/babel'>
        // 1.原生js实现双向绑定
        let input = document.getElementById("input");
        let text = document.getElementById("text");
        let data = {
            value: ""
        };
        Object.defineProperty(data, "value", {
            set: function (val) {
                text.innerHTML = val;
                input.value = val;
            },
            get: function () {
                return input.value;
            }
        });
        input.onkeyup = function (e) {
            data.value = e.target.value;
        };

        //2.react实现双向绑定
        class Com extends React.Component {
            constructor(props){
                super(props)
                this.state={
                    msg:''
                }
            }
            render(){
                return(<div>
                            <input onKeyUp={this.inputChange} />
                            <div>{this.state.msg}</div>
                        </div>
                )
            }
            inputChange=(e)=>{
                this.setState({
                    msg:e.target.value
                })
            }
        }
        ReactDOM.render(<Com />,document.getElementById('app'))
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

高桥靓仔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
记录下用jquery实现双向绑定的
qq_27807733的博客
09-21 2908
双向绑定
React中input表单双向绑定的方法总结
l_ymttt的博客
07-20 5009
一，单个表单的数据修改 import React, { Component } from 'react'; class index extends Component { constructor(props) { super(props) this.state = { name: '', // 后续添加 } } setName(e) { let value = e.
详解defineProperty和Proxy （简单实现数据双向绑定）
越努力，越幸运！
12-20 1208
前言 "数据绑定" 的关键在于监听数据的变化，vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其实主要是用了ES5中的Object.defineProperty方法来劫持对象的属性添加或修改的操作，从而更新视图。 听说vue3.0 会用 proxy 替代 Object.defineProperty()方法。所以预先了解一些用法是有必要的。proxy 能够直接 劫持整个对象，而不是对象的属性，并且劫持的方法有多种。而且最后会返回劫持后的新对象。所以相对来讲，这个方法还是挺好用的。不过
C# WPF入门学习主线篇（二十五）—— 单向绑定、双向绑定
最新发布
weixin_56595425的博客
06-13 1339
单向绑定和双向绑定是WPF中强大的数据绑定机制，简化了数据与UI控件之间的同步。单向绑定适用于只读数据，而双向绑定则适用于可编辑的数据。通过理解和应用这些绑定模式，可以有效地提升WPF应用程序的开发效率和用户体验。
《WPF》--DataContext数据双向绑定
qq_43372178的博客
06-29 4897
1）在FrameworkElement类下有两个重要的属性。利用这两个属性，可以实现UI数据直接与后台的类进行绑定2）前端UI界面属性值等动态与后台绑定的方式有多种，此处列出后台设置DataContext以及前端设置DataContext的两种方式，以及数据双向绑定的最佳实践纯前端的方式好处在于，编译一下，就可以在设计阶段看到效果。 1）先定义好我们的类 2）在前端按照步骤引入 后台设置DataContext 在设计阶段是看不到效果的，但是灵活性更高，属性值不用写死 1)定义一个类 2）在当前窗口加载时，进
Vue3.0之双向绑定原理——Proxy
weixin_40579884的博客
08-19 4242
了解代理模式 一个例子 作为一个单身钢铁直男程序员，小王最近逐渐喜欢上了前端小妹，不过呢，他又和前台小妹不熟，所以决定委托与前端小妹比较熟的UI小姐姐帮忙给自己搭桥引线。小王于是请UI小姐姐吃了一顿大餐，然后拿出一封情书委托它转交给前台小妹，情书上写的：我喜欢你，我想和你谈恋爱，不愧钢铁直男。不过这样写肯定是没戏的，UI小姐姐吃人嘴短，于是帮忙改了情书，改成了我喜欢你，我想和你每天携手看潮起潮落，然后交给了前台小妹。虽然有没有撮合成功不清楚啊，不过这个故事告诉我们，小王活该单身狗。 其实上面就是一个.
Angular的多种数据绑定方式
材女的进击
08-05 1494
Angular 提供了多种数据绑定方式。绑定类型可以分为三类，按数据流的方向分为： 从数据源到视图 从视图到数据源 双向：视图到数据源到视图 绑定类型 语法 分类 插值 属性 Attribute CSS 类 样式 {{expression}} [target]="expression" bind-target="expression"
ViewBinding与DataBinding（视图绑定与数据双向绑定）
https://juejin.cn/user/1654096907477549/posts
12-19 1921
前言：心中纵是有所盼 严寒没有减 风很冷 我的手已渐蓝 前言 控件查找对于Android开发来说也是一部血泪史，一直为更有效的方案进行了多种方案的研究和探讨。`findViewById()` 过于繁琐，强制转换不安全；`butterkniife` 会存在众多臃肿的全局
[安卓开发]kotlin编写 RecyclerView 结合 DataBinding 进行 双向绑定
weixin_44544354的博客
03-09 3695
kotlin编写的RecyclerView,使用DataBinding进行双向绑定 实现了 BaseObservable 的数据类,其实也没啥必要,就一个String 具体效果就是修改一侧RecyclerView数据,另一侧也会同步变化 Unresolved reference: BR ->这个错误可以见我的上篇博客 直接上代码 数据类 class UseData() : BaseObservable() { var useData: String = "" @Bi
Vue 实现双向绑定的四种方法
08-27
使用 Vue 实现双向绑定的方法有多种，本文将介绍四种常见的方法：v-model 指令、.sync 修饰符、model 属性和 vue-better-sync 插件。 1. v-model 指令 v-model 指令是 Vue 中最基本的双向绑定方法。它可以将表单...
MVVM 双向绑定的实现代码
08-27
有多种实现方式，包括： - **手动触发绑定**：在数据变化后，需要显式调用函数来更新View。 - **数据劫持**：利用`Object.defineProperty`或`Proxy`来监听Model对象的get和set操作，当数据变化时，自动触发View的...
MVVM实现数据双向绑定
02-18
实现数据双向绑定有多种方式，这里以流行的MVVM框架如Angular、React和Vue为例进行说明： - **Angular**：Angular的双向数据绑定是通过`ngModel`指令实现的。在HTML模板中，我们可以将`ngModel`绑定到ViewModel的...
Android DataBinding的官方双向绑定示例
08-29
在 Android DataBinding 中，双向绑定可以通过在布局文件中使用 `@={}` 语法来实现。例如，在一个简单的用户名绑定示例中，我们可以使用以下代码： ```xml ``` 在上面的代码中，我们使用 `@={}` 语法...
双向绑定例子
09-21
例如，在Angular中，我们可以使用`ngModel`指令来实现双向绑定，如下所示： ```html [(ngModel)]="username"> ``` 在这个例子中，`[(ngModel)]`是一个语法糖，它同时设置了`ngModel`的 getter 和 setter，使得...
学习一下miniprogram
热门推荐
weixin_45221036的博客
06-04 1万+
微信小程序 一、小程序初体验 1】小程序的数据绑定 和vue一样使用的是双大括号来在wxml中绑定js中的变量 // pages/home/home.js Page({ data: { name:'rayhomie', } }) <!--pages/home/home.wxml--> <!--1. 小程序的数据绑定 --> <view>hello {{name}}</view> 注意：在小程序中不能在js中操作dom 2】小程序的列表渲染
iframe事件冒泡的问题
weixin_45221036的博客
10-17 2202
iframe事件冒泡的问题 在react中遇到了遇到一个问题，导致的原因就是：iframe的事件只能冒泡到iframe下的window，不能冒泡到父页面的window。 实现思路：通过监听iframe的点击事件，使用js实现自动点击button，来收起popover。（存在问题：iframe跨域） 在本地开发时，只能把项目跑在本地的不同端口上，所以是跨域的，线上环境不跨域。（如果想要实现本地模拟正式线上环境，需要本地启动nginx服务器代理到相同端口下） 方法1：domain 因为此时两个页面的主域都是
校招面试冲刺
weixin_45221036的博客
08-24 1759
HTML 1】语义化： 尽可能少的使用无语义的标签div和span 在语义化不明显时，尽量使用p标签，因为p在默认情况下有上下间距 需要强调的文本，可以包含在strong或em标签中，strong默认样式是加粗（不要用b），em是斜体（不要用i） 什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。 <header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。 <nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页
CSS的box-shadow创建边框
weixin_45221036的博客
06-28 1072
CSS的box-shadow创建边框 最常见的用法： box-shadow : x轴偏移 y轴偏移 颜色 如果提供第三个和第四个可选值 box-shadow : x轴偏移 y轴偏移 模糊半径 扩散半径 颜色 内阴影：inset（可选值） 因为box-shadow本来用于展现阴影，因此可以有外阴影和内阴影 box-shadow : x轴偏移 y轴偏移 模糊半径 扩散半径 颜色 inset 栗子一： 下面这个输入框非常常见： <form action=""> <inpu
vue双向绑定switch开关双向绑定
10-10
在 Vue 中实现双向绑定的方式有多种，其中一个方法是使用 v-model 指令。要实现一个双向绑定的开关，可以按照以下步骤进行： 1. 在 data 中定义一个布尔类型的变量来表示开关的状态，比如 `isSwitchOn: false`。 2. 在模板中使用 v-model 指令将该变量与开关绑定起来，例如 `<input type="checkbox" v-model="isSwitchOn">`。 3. 现在，当用户切换开关时，`isSwitchOn` 的值会自动更新。同时，如果你在代码中修改了 `isSwitchOn` 的值，开关的状态也会自动更新。 这样，你就实现了一个双向绑定的开关。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值