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插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
jquery实现简单自动轮播图效果
Jul 29 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
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
apache rewrite_module模块使用教程
2008/01/10 PHP
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
限制文本字节数js代码
2007/03/06 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
浅谈MySQL中的触发器
2015/05/05 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
大学生职业规划论文
2014/01/11 职场文书
幼儿园中班教师寄语
2014/04/03 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
Vue Element plus使用方法梳理
2022/12/24 Vue.js