<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <title>vue 获得当前无素并做相应处理</title>

</head>

<body>

    <div id="app">

        <div id='ideditdiv' contenteditable="true" @click="OngetclickElement($event)">编辑文本的DIV</div>

        <p @click="OngetclickElement($event)">{{editText}}</p>

        <input type="text" @change="Onchange($event)" :value="inputvalue" />

    </div>

</body>

<script>

    // 创建文本根 vue 实例

    var vm = new Vue({

        el: '#app',

        data: {

            editText: '不可编辑的p',

            inputvalue: 'input value'

        },

        methods: {

            // 事件函数获得当前响应事件的元素的标签名与文本

            OngetclickElement(evt) {

                console.log('当前元素标签：' + evt.currentTarget.nodeName)

                console.log('当前元素文本：' + evt.currentTarget.innerHTML)

            },

            // 事件内容变化,先获得当前无素再获得新文本值

            Onchange(evt) {

                console.log("内容变化事件 Onchange,新文本:" + evt.currentTarget.value)

                this.inputvalue = evt.currentTarget.value // 再记录新文本内容

                console.log("data inputvalue = " + evt.currentTarget.value)

            }

        },

    });

</script>

</html>

vue 获得当前无素并做相应处理的更多相关文章

  1. DOM对象控制HTML无素——详解3

    创建元素节点createElement createElement()方法可创建元素节点.此方法可返回一个 Element 对象. 语法: document.createElement(tagName ...

  2. c++ 有符号int和无符号int做加减乘除问题

    c++ 有符号int和无符号int做加算术运算的问题: 一.运算过程先把有符号的补码数直接看成无符号数,在和无符号数进行算术运算 二.int和unsigned int类型进行混合算数运算时,运算结果为 ...

  3. vue插件官方文档，做个记录

    vue的插件,组件都可以按照这种方式添加 官方文档 https://cn.vuejs.org/v2/guide/plugins.html 做个记录用

  4. 初次在Vue项目使用TypeScript，需要做什么

    前言 总所周知,Vue新版本3.0 使用 TypeScript 开发,让本来就很火的 TypeScript 受到更多人的关注.虽然 TypeScript 在近几年才火,但其实它诞生于2012年10月, ...

  5. Vue 路由(对路由页面编写做规范)

    前言 上一篇写了“Vue 路由拦截(对某些页面需要登陆才能访问)” 的博客,此篇是续上篇对路由页面模块化,可以看到之前的路由配置都写在main.js中,真正开发肯定不能都写在main.js,所以我们要 ...

  6. vue是如何通过diff算法做渲染更新

    渲染页面 图中框起来的部分,vue会根据响应式变化的通知生成一颗新的 Virtual Dom Tree,然后将新的Virtual Dom Tree 和之前的 Virtual Dom Tree 做 di ...

  7. DOM对象控制HTML无素——详解2

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

  8. (尚010)Vue列表的搜素和排序

    1.test010.html <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...

  9. DOM对象控制HTML无素——详解1

    getElementsByName()方法 返回带有指定名称的节点对象的集合. 语法: document.getElementsByName(name) 与getElementById() 方法不同的 ...

随机推荐

  1. 出现“无法在发送 HTTP 标头之后进行重定向”问题

    如题,在Response.Redirect之后会偶尔出现“无法在发送HTTP标头之后进行重定向”问题. 是因为,已经在出现错误的代码之前进行过一次重定向了.仔细检查代码即可. 解决方法:按照逻辑移除多 ...

  2. 2019-08-15 纪中NOIP模拟B组

    T1 [JZOJ3455] 库特的向量 题目描述 从前在一个美好的校园里,有一只(棵)可爱的弯枝理树.她内敛而羞涩,一副弱气的样子让人一看就想好好疼爱她.仅仅在她身边,就有许多女孩子想和她BH,比如铃 ...

  3. 浏览器缓存信息（Autocomplete ）

    Autocomplete HTML Attribute Not Disabled for Password Field 漏洞详细Web系统被识别到支持自动完成功能,这样通过浏览器可以获取到敏感信息. ...

  4. 手动添加ubuntu服务

    在/etc/init.d/目录下创建一个简单的服务脚本,假设脚本名为hello #!/bin/sh case "$1" in start) # start 的代码 ;; stop) ...

  5. Sql Server：创建用户并指定该用户只能看指定的视图，除此之外的都不让查看

    1,在sql server中选择好要操作的数据库 2,--当前数据库创建角色 exec sp_addrole 'seeview'      --创建了一个数据库角色,名称为:[seeview] 3,- ...

  6. centos7下使用selenium实现文件上传

    1.pip install SendKeys 2. 利用js去掉元素的隐藏属性,然后输入: 一般控制元素显示或隐藏是用display属性来实现的 style.display = “none”,表示元素 ...

  7. 【原】librtmp源码详解

    “悟已往之不谏,知来者之可追”.后悔做了这么久的直播,却不曾理解rtmp协议的实现原理,现在意识到了这个问题,特此补救.同时谨以此文纪念曾经的雷霄骅同学,感谢他对音视频领域做出的卓越贡献和引领. 1. ...

  8. Java EE开发课外事务管理平台

    Java EE开发课外事务管理平台 演示地址:https://ganquanzhong.top/edu 说明文档 一.系统需求 目前课外兴趣培训学校众多,完善,但是针对课外兴趣培训学校教务和人事管理信 ...

  9. 从原理到方案，一步步讲解web移动端实现自适应等比缩放

    前言 在移动端做自适应,我们常用的有媒体查询,rem ,em,宽度百分比这几种方案.但是都各有其缺点. 首先拿媒体查询来说,在某一个宽度区间内只能使用一种样式,为了适应不同屏幕要,css的代码量就会增 ...

  10. 如何着手学习WebRTC开发（转）

    文章链接:http://www.sohu.com/a/146536246_458408 WebRTC中文社区-国内镜像:https://webrtc.org.cn/mirror/#windows%E2 ...