vue render函数实现数据的双向绑定

最新推荐文章于 2024-04-07 16:33:37 发布
最新推荐文章于 2024-04-07 16:33:37 发布
阅读量8.5k 收藏 9
点赞数 3
分类专栏： vue使用记录 文章标签： vue使用记录之render函数是实现双向绑定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35713827/article/details/89074128
版权

一般情况下vue通过v-model即可实现双向绑定功能，但是有时候我们的遇到的通过：column来设置列表的：

这时如何使用v-model呢，官方API给出了答案，但是有由于鄙人能力有限，未能按照官方给出的方法成功实现效果，所以就独自摸索，有幸终于是实现了，方法如下：

最终效果：

初始化页面时输入框可以展示后台返回的数据，当我们对数据作了修改以后，点击“确认”也可将数据传递给后台。成功实现双向绑定。（如有不足之处，希望大佬们多多指点。）

最后附上官方API给出的v-model实现方法：

杀生丸H
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue渲染函数使用createElement创建可双向绑定的input
IT学霸
05-02 1万+
昨天晚上开始看官方文档的渲染函数这一节。看完后，对createElement的使用还是懵懵懂懂的，只好动动手，再查查资料，总算有些收获。 一、前言 对于createElement这个函数的第二个参数，一定要弄清楚attrs，props，domProps这3个属性的用法，什么时候用。今天说的可双向绑定的input，就用到了domProps。 二、使用 首先定义一个input组件，如下所示： ...
Vue.js render函数的数据双向绑定
_雄鹿的博客
04-18 3457
在Vue.js render函数中数据双向绑定较为复杂。
h函数中input数据绑定的问题
最新发布
Ga_Harbinds的博客
04-07 225
2.添加一个onInput方法来更新绑定对象的值，如果没有这一步会导致没法输入。1.使用modelValue 绑定对象。
前端基础学习-vue的render函数进行双向绑定
小夭的博客
05-12 2255
背景 在前面的文章中提到elementui中的table组件可以通过render-header来自定义表头，之前的效果是在表头添加了复选框，后面发现操作成功后应该支持清除勾选的操作，但是通过render函数渲染的元素没有办法进行双向绑定，我们只有通过自己手动通过v-bind和v-on事件实现双向绑定 代码部分 html <el-table-column prop="name" label="操作人" show-overflow-tooltip :render-header="rende
【Vue】在Render函数中实现v-model的数据双向绑定效果
VLyb
12-20 9723
Vue中Render函数里没有与v-model相对应的API，因此若想实现双向的数据绑定需要自己来实现逻辑。 首先来看源代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Render函数实现v-model</title> </head> <body> <div id="app">
Vue3 动态创建组件实现数据绑定（h函数）
weixin_41276201的博客
10-01 1514
可以看到typescript里component变成了一个方法，而在html里调用函数来获取is的属性值，这时候代码生效。不知道具体原因，猜测是直接渲染好vnode在利用v-for循环生成会导致vnode不在监听范围内。经常看到框架里使用h函数动态创建组件，可自己使用时发现数据无法绑定，我使用的代码如下。
VUE-Table上绑定Input通过render实现双向绑定数据的示例
10-18
总之，Vue-Table上通过`render`函数绑定`Input`并实现双向数据绑定，主要是利用Vue的响应式系统和自定义渲染能力。这种做法允许我们在表格组件中创建交互式输入，同时保持数据模型和视图的同步，提高了用户体验。
Vue Render函数创建DOM节点代码实例
10-15
6. **事件处理**：在 `render` 函数内，我们需要手动处理事件绑定，比如上面的输入事件监听器，这与模板语法中的 `v-on` 指令不同。 总之，Vue的 `render` 函数提供了更底层的控制力，适合处理复杂或特定的渲染逻辑...
Vue Render函数原理及代码实例解析
10-15
由于Render函数不支持Vue的内置指令如`v-if`、`v-else`和`v-show`，这些功能需要在`render`函数内部手动实现。例如，实现`v-model`功能： ```javascript Vue.component('my-component', { data() { return { ...
浅谈vue,angular,react数据双向绑定原理分析
08-28
浅谈vue,angular,react数据双向绑定原理分析 在前端开发中，数据双向绑定是指视图和模型之间的同步更新机制。当模型数据改变时，视图会自动更新；反之，当视图发生变化时，模型数据也会同步更新。本文将对Vue、...
vue render 的Input怎样实现数据双向绑定
qq_25103439的博客
08-21 1701
render:(h, params) => { return h("Input",{ props:{ value:this.info.whiteList }, on:{ 'on-change':(e)=>{ this.info.whiteLi...
理解对象的数据属性和访问器属性、实现简单的双向绑定
ljyahaha的博客
04-15 154
面试官或许也会要求你用某函数实现js下的数据双向绑定，可是这个函数的用法你了解吗，对象的某些内部属性不能直接访问时，你需要使用哪个函数呢，内部属性又包括哪些呢？带着这些疑问，继续往下读吧~ js中通常使用一些内部特性来描述属性的特征，这些特性是由为JS实现引擎的规范定义的，开发者不能在javascript中直接访问这些内部特性，比如：[[Enumerable]]。属性有两种，数据属性和访问器属性。 首先，数据属性包含一个保存数据值的位置，4个特性来描述数据值的行为。 [[configure]]: 表示属性
vue 高阶函数，v-model表单绑定
不是死水
07-16 700
一.高阶函数 1.filter（）创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 const num = [10,20,30,50,100] // 1.filtle函数的使用 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 let newNews = num.filter(function (n) { return n < 40 }) console.log(newNews); 2.ma
如何实现双向数据绑定（面试题）
SH744的博客
09-22 2976
（1）视图改变如何同步给变量?视图绑定oninput/onchange事件, 拿到值赋给变量（2）如何检测对象里属性的值改变?Object.defineProperty数据劫持,重写set和get（3）set和get什么时候触发?对属性赋值触发set, 取值触发get。
vue3中h函数中传入emits的值
weixin_41276201的博客
10-10 593
注意：方法前面一定要加上小写on，不然绑不上。子组件中声明：update:app方法。父组件中使用h函数动态绑定。
vue —— h函数的学习与使用
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
01-25 7330
介绍vue中的h函数及其使用
vue element-ui 自定义弹窗 input,value的双向绑定
qq_39977679的博客
04-17 4146
1. 创建袁术的函数 const h = this.$createElement 2. 生成input虚拟dom const obj = h('input', { 'style': { 'width': '120px' }, 'attrs': { 'value': this.test }, 'on': { input: function(event) { this.test ...
vue2.x的h函数(createElement)与vue3中的h函数
热门推荐
仙途路漫漫其修远兮
07-15 1万+
在此你可以对比vue2与vue3中h函数的区别；vue2.x的 h 函数基础介绍及使用（createElement）及vue3中h函数的各种方法使用介绍
vue实现数据双向绑定
04-03
Vue实现数据双向绑定的原理是利用了Object.defineProperty()方法对数据进行劫持，通过将data中的数据属性转换为getter和setter方法，从而实现对数据的监听和更新。 具体实现步骤如下： 1. 首先定义一个Vue类，用于创建Vue实例。 ``` class Vue { constructor(options) { this._data = options.data this._el = options.el this._template = document.querySelector(this._el) this._render = this.compile(this._template.innerHTML) this._template.innerHTML = this._render(this._data) this.observe(this._data) } observe(data) { Object.keys(data).forEach(key => { let value = data[key] Object.defineProperty(data, key, { get() { console.log(`读取 ${key} 属性: ${value}`) return value }, set(newValue) { console.log(`设置 ${key} 属性: ${newValue}`) value = newValue this._template.innerHTML = this._render(this._data) } }) }) } compile(template) { const reg = /\{\{(.+?)\}\}/g let code = 'return `' let cursor = 0 let match while ((match = reg.exec(template))) { code += template.slice(cursor, match.index) code += '${' + match[1].trim() + '}' cursor = match.index + match[0].length } code += template.slice(cursor) code += '`' return new Function('data', code) } } ``` 2. 在Vue类的构造函数中，获取传入的data和el，并进行模板编译，然后对data中的属性进行监听。 3. 在observe方法中，使用Object.defineProperty()方法对data中的每个属性进行劫持。在getter方法中，输出读取属性的提示，并返回属性值；在setter方法中，输出设置属性的提示，更新属性值，并重新渲染模板。 4. 在compile方法中，使用正则表达式匹配模板字符串中的变量，将其替换为${variable}的形式，并生成一个新的模板字符串。 5. 最后，将生成的模板字符串转换为一个函数，该函数接受data作为参数，返回渲染后的HTML字符串。 使用示例： ``` const app = new Vue({ el: '#app', data: { message: 'Hello world!' } }) ``` HTML模板： ``` <div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> ``` 绑定了一个p标签和一个input元素，两个元素都绑定了message属性，当修改input元素的值时，p标签的内容也会跟着更新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值