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+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 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 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
js实现iframe动态调整高度的代码
2008/01/06 Javascript
javascript css float属性的特殊写法
2008/11/13 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
python转换摩斯密码示例
2014/02/16 Python
Python使用百度API上传文件到百度网盘代码分享
2014/11/08 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
详解python编译器和解释器的区别
2019/06/24 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
scrapy头部修改的方法详解
2020/12/06 Python
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
美术指导求职信
2014/03/17 职场文书
给校长的建议书200字
2014/05/16 职场文书
会计求职信范文
2014/05/24 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年幼儿园教学工作总结
2014/12/04 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers