<!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. 用数学解赌博问题不稀奇，用赌博解数学问题才牛B

    有一个经典的概率问题:平均需要抛掷多少次硬币,才会首次出现连续的 n 个正面?它的答案是 2^(n+1) – 2 .取 n=2 的话,我们就有这样的结论:平均要抛掷 6 次硬币,才能得到两个连续的正面 ...

  2. Codeforces 474B. Worms

    It is lunch time for Mole. His friend, Marmot, prepared him a nice game for lunch. Marmot brought Mo ...

  3. 杭电oj_2047——阿牛的EOF牛肉串（java实现）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2047 思路:先是列出了四个,但是没发现规律,然后开始画递归树,在其中找到了规律,算出递归式为f(n) ...

  4. cdn第三方前端依赖架包共享地址

    https://cdnjs.com/ 可在此网站查找你需要的稳定第三方前端依赖架包

  5. 剖析Javascript中sort()使用方法，以及重写sort()里的排序方法，实现自定义排序

    语法:arrayObject.sort([compareFunction]):参数compareFunction可选.规定排序顺序,必须是函数. sort() 方法用于对数组的元素进行排序,并返回数组 ...

  6. Java连载84-Collection的常用方法、迭代器

    一.Collections的常用方法介绍 1.承接上次连载,先介绍几个简单的常用方法 package com.bjpowernode.java_learning; import java.util.* ...

  7. 【Python】天天向上的力量

    每天进步一点点会有什么不同呢? Q1:每天进步千分之一或退步千分之一会怎么样? #DayDayUp,每天进步一千分之一 print("基础为1") dayup=pow(1.001, ...

  8. 《TCP/IP入门经典》摘录--Part 3

    TCP/IP协议系统 3.子网划分和CIDR 子网 划分网络 为什么需要划分子网? 子网划分就是在网络 ID 之下提供了第 2 层逻辑组织.路由器能够把数据报发送给网络里的某个子网地址(一般对应于一个 ...

  9. C++-main函数与命令行参数

    1.main函数的概念 C语言中main函数称之为主函数 —个C程序是从main函数开始执行的 下面的main函数定义正确吗? //1 main(){ } //2 void main(){ } //3 ...

  10. ORA-01789: 查询块具有不正确的结果列数

    问题描述 ORA-01789: 查询块具有不正确的结果列数 问题原因 sql语句用union时的 两个语句查询的字段不一致,好像顺序也要保持一致才行