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实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 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
一些花式咖啡的配方
2021/03/03 冲泡冲煮
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
深入浅出php socket编程
2015/05/13 PHP
PHP递归创建多级目录
2015/11/05 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
Python采用Django制作简易的知乎日报API
2016/08/03 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
Django实现跨域的2种方法
2019/07/31 Python
Python基于WordCloud制作词云图
2019/11/29 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
类如何去实现接口
2013/12/19 面试题
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
Linux文件操作命令都有哪些
2016/07/23 面试题
实习生自我评价
2014/01/18 职场文书
员工生日会策划方案
2014/06/14 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
护理工作心得体会
2016/01/22 职场文书
建房合同协议书
2016/03/21 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
Python中npy和mat文件的保存与读取
2022/04/24 Python
java版 简单三子棋游戏
2022/05/04 Java/Android
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android