vue.js2.0点击获取自己的属性和jquery方法


Posted in jQuery onFebruary 23, 2018

如下所示:

vue.js2.0点击获取自己的属性和jquery方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="dt">
<div id="dongtao">
    <span class="nihao" v-for="(item,index) in items" 
    :data-index="index"
    :dt="index"
    v-on:click="onclick($event,index)" 
    :data-d ="JSON.stringify( item)"
    href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" 
    data-href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" >
    {{ item.text }}
    </span>
  </div>
  <input type="text" name="" id="index" value=""/>
</div>
</body>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
   el: '#dt',
   data: {
    items: [
     { text: '巴士' },
     { text: '快车' },
     { text: '专车' },
     { text: '顺风车' },
     { text: '出租车' },
     { text: '代驾' }
    ]
   },
   methods: {
    onclick:function(event,index){
    console.log(event.target)
    console.log(index)
     event.preventDefault();
     event.stopPropagation();
     
     console.log($("#dongtao").attr('id'))
     console.log(event.target.parentNode.getAttribute("id"))
  
     console.log('-------------------')
     let target = event.target
     console.log(target.getAttribute("data-index"));
     console.log(target.getAttribute("href"));
     console.log(target.getAttribute("data-d"));
     document.getElementById('index').value = target.getAttribute("data-index");
    }
   }
  })
// $('#dongtao').on('click', '.nihao', function(){
// console.log($(this).index() +"----"+"dddddddddddddddddd" )
// $(this).hide()
// })
// 
// $("input").on('click', function(){
// alert(1111)
// })
</script>
</html>

以上这篇vue.js2.0点击获取自己的属性和jquery方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
实现jquery放大镜的两种方法
Feb 22 #jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 #jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 #jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 #jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 #jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 #jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 #jQuery
You might like
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
初学JavaScript第二章
2008/09/30 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
checkbox使用示例
2013/08/23 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
JavaScript实现无穷滚动加载数据
2017/05/06 Javascript
pm2 部署 node的三种方法示例
2017/10/20 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
python中的装饰器详解
2015/04/13 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
python实现自动化上线脚本的示例
2019/07/01 Python
python生成requirements.txt的两种方法
2019/09/18 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
C语言面试题
2013/05/19 面试题
《金色的脚印》教后反思
2014/04/23 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
小学二年级语文教学反思
2016/03/03 职场文书