vue 获得当前无素并做相应处理
<!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 获得当前无素并做相应处理的更多相关文章
- DOM对象控制HTML无素——详解3
创建元素节点createElement createElement()方法可创建元素节点.此方法可返回一个 Element 对象. 语法: document.createElement(tagName ...
- c++ 有符号int和无符号int做加减乘除问题
c++ 有符号int和无符号int做加算术运算的问题: 一.运算过程先把有符号的补码数直接看成无符号数,在和无符号数进行算术运算 二.int和unsigned int类型进行混合算数运算时,运算结果为 ...
- vue插件官方文档，做个记录
vue的插件,组件都可以按照这种方式添加 官方文档 https://cn.vuejs.org/v2/guide/plugins.html 做个记录用
- 初次在Vue项目使用TypeScript，需要做什么
前言 总所周知,Vue新版本3.0 使用 TypeScript 开发,让本来就很火的 TypeScript 受到更多人的关注.虽然 TypeScript 在近几年才火,但其实它诞生于2012年10月, ...
- Vue 路由(对路由页面编写做规范)
前言 上一篇写了“Vue 路由拦截(对某些页面需要登陆才能访问)” 的博客,此篇是续上篇对路由页面模块化,可以看到之前的路由配置都写在main.js中,真正开发肯定不能都写在main.js,所以我们要 ...
- vue是如何通过diff算法做渲染更新
渲染页面 图中框起来的部分,vue会根据响应式变化的通知生成一颗新的 Virtual Dom Tree,然后将新的Virtual Dom Tree 和之前的 Virtual Dom Tree 做 di ...
- DOM对象控制HTML无素——详解2
节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...
- (尚010)Vue列表的搜素和排序
1.test010.html <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...
- DOM对象控制HTML无素——详解1
getElementsByName()方法 返回带有指定名称的节点对象的集合. 语法: document.getElementsByName(name) 与getElementById() 方法不同的 ...
随机推荐
- 欢迎来到L T X的博客 & 博客转型公告
这里是L T X,一位来自重庆的学生的个人博客. 由于博主以前是OIer,目前博客里主要是OI相关的内容. 但是现在博主已经退役了,因此博客将会转向...嗯...那种...就是那种...比较奇怪的类型 ...
- [TJOI2013] 拯救小矮人- 贪心,dp
结论:矮的人比高的人先走一定不会使得答案变劣 于是我们排序后,像 0-1 背包那样依次考虑每个人走不走 #include <bits/stdc++.h> using namespace s ...
- 自定义Nginx返回页面
1.403返回页面 #user nobody; worker_processes ; #error_log logs/error.log; #error_log logs/error.log noti ...
- 如何在MacOS的VScode上安装Python3
由于MacOS上的VScode默认安装的Python版本是2.7,所以需要我们自己手动安装Python3从Python官网下载最新版本-安装-设置环境变量当然是可行的,但下面要介绍的是另外一种方式:H ...
- Codeforces Round #623 (Div. 1, based on VK Cup 2019-2020 - Elimination Round, Engine)A（模拟，并查集）
#define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> using namespace std; pair<]; bool cmp( ...
- [CF484D] Kindergarten - 贪心
有一组数,你要把他分成若干连续段.每一段的值,定义为这一段 数中最大值与最小值的差. 求一种分法,使得这若干段的值的和最大. N < 1e6, a[i] < 1e9. 朴素的\(O(n^2 ...
- python面试的100题（5）
5.现有字典 d= {'a':24,'g':52,'i':12,'k':33}请按value值进行排序? sorted(d.items(),key=lambda x:x[1]) sorted函数 对由 ...
- Apache Kafka（六）- High Throughput Producer
High Throughput Producer 在有大量消息需要发送的情况下,默认的Kafka Producer配置可能无法达到一个可观的的吞吐.在这种情况下,我们可以考虑调整两个方面,以提高Pro ...
- 使用Samba实现文件共享：Windows和Linux之间
1.概述: 1987 年,微软公司和英特尔公司共同制定了 SMB(Server Messages Block,服务器消息 块)协议,旨在解决局域网内的文件或打印机等资源的共享问题,这也使得在多个主机之 ...
- selenium的显示等待、隐式等待
转载:https://www.cnblogs.com/mabingxue/p/10293296.html Selenium显示等待和隐式等待的区别1.selenium的显示等待原理:显示等待,就是明确 ...