vue 中 input事件「建议收藏」

vue 中 input事件「建议收藏」vue中input事件input事件的使用<div:id=”inputId”:class=”[‘textarea_content_right’]”:contenteditable=”true”@input=”changeText($event)”v-text=”currentValue”></div>​data(){return…

大家好,又见面了,我是你们的朋友全栈君。

vue 中 input事件

input事件的使用

 

<div
:id="inputId"
:class="['textarea_content_right']"
:contenteditable="true"
@input="changeText($event)"
v-text= "currentValue"
></div>
​
data() {
  return {
    currentValue: "",
  }
},
watch: {
  currentValue(newVal) {
    console.log(newVal)
  }
},
methods: {
  changeText(event) {
    this.currentValue = event.target.innerText;
    console.log(newVal)
  },
}  

当input、select、textarea 元素的 value 被修改时,会触发 input 事件。同时,input 事件也适用于启用了 contenteditable 的元素,以及开启了 designMode 的任意元素。在contenteditable 和 designMode 的情况下,事件的 target 为当前正在编辑的宿主。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/131764.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 大J_gh5延时摄影怎么设置

    大J_gh5延时摄影怎么设置Jboot v2.0-rc.9 发布,优化细节问题

    2022年4月21日
  • junit mock 方法(need的用法总结)

    使用EasyMock的总体步骤1、生成Mock接口IServicemockService=EasyMock.createMock(“name”,IService.class);如果要mock对象,而不是接口,应该使用classextension:org.easymock.classextension.EasyMock如果要mock多个接口,最好使用Mo

    2022年4月12日
  • java用什么软件_Java编程什么软件最好用?

    java用什么软件_Java编程什么软件最好用?原标题:Java编程什么软件最好用?“工欲善其事必先利其器”,想要学好Java编程开发,除了要有好的学习资源之外,还要有一套适合自己的Java编程软件,好的编程软件能极大提高你的学习和工作效率。那么,Java编程软件有哪些?Java编程用什么软件好呢?下面整理了一些华清Java学院为大家推荐的Java编程软件。Java编程软件有哪些?1、JDKJDK是java初学时用的,比较麻烦,建议开始学习J…

    2022年5月10日
  • SprinBoot——SpringBoot项目WebSocket推送

    SprinBoot——SpringBoot项目WebSocket推送SprinBoot——SpringBoot项目WebSocket推送

    2022年4月23日
  • js生成日历(php编写一个月的日历)

    <!DOCTYPEhtml><html> <head> <metacharset=”utf-8″> <title></title> <styletype=”text/css”> .main{ width:800px; margin:0auto; } …

    2022年4月18日
  • 用Python的turtle库画太极图

    用Python的turtle库画太极图作为一名中医药大学的学生,对太极图那是情有独钟,这不,我刚开始学Python不久,便想着用turtle库画一个太极图,对turtle库的使用还不熟练,代码量可能有点多……代码:importturtler=200#太极半径turtle.pensize(2)#画笔尺寸#将太极的圆心调整至坐标原点turtle.right(90)turtle.penup()#拿起画笔turtle.fd(r)turtle.pendown()#落下画笔turtle.right(90)#调整海

    2022年5月18日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号