vue3+jsx+antd 的双向数据绑定、事件绑定、变量绑定方法

v-model   input的数据双向绑定

const App = {setup() {let visible = ref('');return { visible };},render() {return (<input v-model={[this.visible,'value']} />);},
};

事件绑定

const App = {setup() {let tableTitle = [{title: '报表种类',dataIndex: 'reportType',width: '50%'},{title: '操作',dataIndex: 'handle',width: '50%',slots: {customRender: 'operation'}}];let tableItem = ref([{key:'1',reportType:'报表内容1',}])const clickHandle = ()=>{console.log('1');}const deleteHandle = ()=>{console.log('2');}return { clickHandle,deleteHandle,tableTitle,tableItem};},render() {const Slot = {//  { record } 代表了某一行表格的信息  operation: ({ record }) => {return (<div><spanstyle={{ marginRight: '10px', cursor: 'pointer', color: '#1890ff' }}// 如果这样写onClick={this.exportHandle(record);}会在渲染的时候立即执行，必须向下面这样写onClick={() => {this.deleteHandle(record);}}>删除</span></div>);}};return (<div>//  数据变量的绑定<a-table columns={this.tableTitle} data-source={this.tableItem}></a-table>//  点击事件的绑定<span onClick={this.clickHandle}>点击了我</span>//  点击事件的绑定 需要传参  这种情况是在  这个元素是函数生成的，一般是map返回的元素  里面必须用这种绑定 否则会自己触发//  <span onClick={()=>{this.clickHandle(value)}}>点击了我</span></div>);},
};

vue3+jsx+antd 的双向数据绑定、事件绑定、变量绑定方法相关推荐

前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题盒子模型盒子水平垂直居中的方案经典布局方案圣杯布局双飞翼布局 flex布局定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
理解VUE双向数据绑定原理和实现
一.原理: 1.vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变: 2.核心:关于VUE双向数 ...
vue的v-model的双向数据绑定原理
vue的双向数据绑定是一个很有意思的特性:知道其原理方能运用自如 <div id="demo"><h1>双向绑定机制</h1><!--表单 ...
oracle变量绑定代码,Oracle 绑定变量
oracle 中,对于一个提交的sql语句,存在两种可选的解析过程,一种叫做硬解析,一种叫做软解析.https://www.cndba.cn/Dave/article/1275 一个硬解析需要经解析, ...
oracle java 绑定变量的值_Oracle SQL调优之绑定变量用法简介
最近在看<基于Oracle的SQL优化一书>,并做了笔记,作者的个人博客:http://www.dbsnake.net/ @ 一.SQL执行过程简介继上一篇博客Oracle的cursor ...
JAVA异常记录（ORA-56900:pivot|unpivot 操作内不支持绑定变量）
JAVA中ORA-56900: pivot|unpivot 操作内不支持绑定变量 ORA-56900: pivot|unpivot 操作内不支持绑定变量使用场景及遇到问题解决方法:在java中拼好 ...
oracle绑定变量写法,关于Oracle绑定变量的个人理解及使用场景
关于Oracle绑定变量摘自--Oracle 11g concept 中英文对照版使用了绑定变量能提高性能主要是因为这样做可以尽量避免不必要的硬解析而节约了时间,同时节约了大量的CPU资源. 绑定 ...
Vue绑定事件，双向数据绑定，只是循环没那么简单
v-on对象处理 <p @mouseover = "doTish" @mouseout = "doThat"> 对象形式 </p>< ...
c语言一次绑定多个控件,一入前端深似海，从此红尘是路人系列第九弹之如何实现一个双向数据绑定...
前言简单介绍一下双向数据绑定实现的是一个什么样的东西.首先有两个东西,他们分别是: V-视图层 M-数据层 1.视图层传向数据层:V发生改变,M也发生改变 2.数据层传向视图层:M发生改变,V也发生 ...

vue3+jsx+antd 的双向数据绑定、事件绑定、变量绑定方法

vue3+jsx+antd 的双向数据绑定、事件绑定、变量绑定方法相关推荐

最新文章

热门文章