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() 方法不同的 ...
随机推荐
- vue.js 的cdn 链接的引用地址
引用地址有两种一种完整版,一种压缩版效果是一样的 https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js https://cdn.bootcss.com ...
- mycat linux上目录介绍
1.本文引用来自mycat官方文档,具体可以浏览mycat官网 2.linux系统下面的目录 MyCAT 有提供编译好的安装包,支持 windows.Linux.Mac.Solaris 等系统上安装与 ...
- PHP实现微信公众号分享接口
还是一贯风格:用代码说话!!! <?php class ShareModel extends BaseModel { var $appId = APPID; var $appSecret = A ...
- kali 所有版本
首先打开kali官方网站 第一步 第二步 找到 第三步点击标黄色的地方 http://cdimage.kali.org/ 第四步将网址中的cdimage替换为old http://old.kali.o ...
- git命令全景图
- AcWing 1016. 最大上升子序列和
#include<iostream> using namespace std ; ; int f[N]; int a[N]; int main() { int n; cin>> ...
- socket编程（python）
交互原理: 服务端和客户端通过底层socket接口编程通信,交互的信息都是通过byte字节形式传递,网络传输中不能保证信息完整传输有可能是分片传输,所以可能从缓冲区获取的信息需要分段拼接或拆分组合成一 ...
- HTML列表,表格与媒体元素
一.无序列表 <ul> <li>无序列表</li> <li>有序列表</li> <li>自定义列表</li> < ...
- flask入门（二）
接着上文 讲一讲响应 flask调用视图函数后,会将其返回值作为响应的内容.大多数情况下,响应就是一个简单的字符串,作为HTML页面回送客户端.但HTTP协议需要的不仅是作为请求响应的字符串.HTTP ...
- 爬虫实战 豆瓣音乐top250 xpath
刷知乎时刷到一篇爬取豆瓣音乐top250的,然后看了看,感觉自己的爬虫又更上一层楼了哈啊哈哈,尤其是发现xpath这么好用的东西. 不过也有一个感慨,就是有很多种方式都可以获得想要的数据,对于入门的新 ...