使用js实现单向绑定
详细解释单向绑定
参考资料
addEventListener()定义与用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="a">
<span id="b"></span>
<script>
// var obj = {};
// Object.defineProperty(obj,"hello",{
// set: () => {
// console.log("get方法被调用");
// },
// get: (val) => {
// console.log("se方法被调用"+val);
// }
// })
let obj = {};
//Object.defineProperty(obj, prop, descriptor)
// obj 要在其上定义属性的对象。
// prop 要定义或修改的属性的名称。
// descriptor 将被定义或修改的属性描述符。
Object.defineProperty(obj, 'hello', { //这里定义obj.hello为完成修改的属性
set: (newVal) => { //当obj.hello的属性发生变化,就会以参数传进来
document.getElementById('a').value = newVal; //set触发给a值同时把值给b实现绑定
document.getElementById('b').innerHTML = newVal;
obj.hello
},
get: ()=> {
console.log("hahahaah");
}
});
//addEventListener() 方法用于向指定元素添加事件句柄。
//element.addEventListener(event, function, useCapture)
//event 所有 HTML DOM 事件
//function 指定事件触发时执行的函数。
//useCapture 指定事件是否在捕获或冒泡阶段执行。
document.addEventListener('keyup', (e) => { //监听键盘的按键松开的事件
console.log(e);
obj.hello = e.target.value; //将监听到了变化的值给obj.hello,让他触发set属性
})
</script>
</body>
</html>
使用js实现单向绑定的更多相关文章
- Vuejs——（1）入门（单向绑定、双向绑定、列表渲染、响应函数）
版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 参照链接: http://cn.vuejs.org/guide/index.html [起步]部 ...
- ng1中 如何用双向绑定 实现单向绑定的初始时不显示双括号效果？
ng1中 如何用双向绑定 实现单向绑定(ng-bind就可以不显示{{}})的初始时不显示双括号效果? AngularJS 实例 页面加载时防止应用闪烁: <div ng-app="& ...
- JS基础——事件绑定
上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理V ...
- JS中事件绑定的三种方式
以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upl ...
- js事件的绑定与移除
事件的绑定分为3类: <div id='clickEvent'>点击事件</div> 在DOM元素中直接绑定 <div onclick="alert('4567 ...
- 用原生 JS 实现双向绑定及应用实例
写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面.angular封装了双向绑定的方法,使双向绑定变得十分简单.但是在有些场景下(比如下面那个场景),不能使用 ...
- 【前端】vue.js实现输入框绑定
vue.js实现输入框绑定 实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动 ...
- Vue.js：样式绑定
ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...
- JS 监听绑定和取消事件
1. 原生 JS 语言: 绑定:addEventListener(type, function, false) 取消: removeEventListener(type, function, fals ...
随机推荐
- Genymotion模拟器拖入文件报An error occured while deploying the file的错误
今天需要用到资源文件,需要将资源文件拖拽到sd卡中,但老是出现这个问题: 资源文件拖不进去genymotion.查看了sd的DownLoad目录,确实没有成功拖拽进去. 遇到这种问题的,我按下面的思路 ...
- 基础JavaScript练习（一）
任务目的 学习与实践JavaScript的基本语法.语言特性 初步了解JavaScript的事件是什么 初步了解JavaScript中的DOM是什么 任务描述 如图,模拟一个队列,队列的每个元素是一个 ...
- SQL日期转换
SQL 语句日期用法及函数 --DAY().MONTH().YEAR()——返回指定日期的天数.月数.年数: select day(cl_s_time) as '日' from class --返回 ...
- 设计模式：组合（Composite）模式
设计模式:组合(Composite)模式 一.前言 关于Composite模式,其实就是组合模式,又叫部分整体模式,这个模式在我们的生活中也经常使用,比如说如果读者有使用Java的GUI编写过程序 ...
- APUE1.11:系统调用 库函数
区别是: system call:提供一种最小接口,而库函数通常提供比较复杂的功能.
- 从0开始学CentOS7（1）
首先,先来几句简介吧.. java开发一枚,总觉得自己的技术提升缓慢... 最近看到同事有在论坛发发自己的心得什么的...我脑中晃出的灵光就是:好记性不如烂笔头,试试吧~ 好了,正式开始了..cent ...
- ApiServer_YiChat apache项目布置过程
1.复制文件到 /var/www/ 文件夹下 2.配置项目目录 3.修改/var/www/api/public 文件夹下的隐藏文件 .htaccess 增加‘?’号 4.打开/etc/ ...
- EOF及相关函数
结论:EOF是在头文件stdio.h中预定义的一个宏,而eof(end of file)是一个与标准输入/输出流相关联的标志位.当文件指针已经指向文件尾且再次尝试读取时,eof标志会被设置.同时,某些 ...
- Vue-Quill-Editor插件插入图片的改进
最近在做一个Vue-Clie小项目,使用到了Vue-Quill-Editor这个基于Vue的富文本编辑器插件.这个插件跟Vue契合良好,使用起来比其他的诸如百度UEditor要方便很多,但是存在一个小 ...
- Java时间格式化时YYYY(大写)和yyyy(小写)的区别
在Java中,我们大多数情况下格式日期都是用的SimpleDateFormat,比如说把一个日期格式成"yyyy-MM-dd"的形式. 我们要注意的是,对于年份来说,大写的Y和小写 ...