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中封装函数传递当前元素的方法示例
May 05 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jQuery实现穿梭框效果
Jan 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
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
微信小程序实现蒙版弹窗效果
2018/11/01 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
python文件和目录操作函数小结
2014/07/11 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
Python3简单实现串口通信的方法
2019/06/12 Python
Python更新所有已安装包的操作
2020/02/13 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
求职信结尾怎么写
2014/05/26 职场文书
艺术节开幕词
2015/01/28 职场文书
小学运动会加油稿
2015/07/22 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python