zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    对象工厂函数与构造函数
    H5案例学习笔记
    对象工厂函数与构造函数
    JS对象的创建与使用
    CSS浏览器兼容性写法小结
    网页布局二三事
    关于URL、Web的一些概念
    什么是单点登录及解决方法
    Django--model-数据库操作
    Vue端增删改查实现
  • 原文地址:https://www.cnblogs.com/qinlongqiang/p/12350819.html
Copyright © 2011-2022 走看看