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 EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 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
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
一段实用的php验证码函数
2016/05/19 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
[10:53]2018DOTA2国际邀请赛寻真——EG
2018/08/11 DOTA
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
python给图像加上mask,并提取mask区域实例
2020/01/19 Python
Django ModelForm操作及验证方式
2020/03/30 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
精选奢华:THE LIST
2019/09/05 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
工作失职检讨书范文
2015/05/05 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
Python OpenCV之常用滤波器使用详解
2022/04/07 Python