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 zTree树插件动态加载实例代码
May 11 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jqueryUI tab标签页代码分享
Oct 09 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 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
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
PHP中file_exists函数不支持中文名的解决方法
2014/07/26 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
初学JavaScript第二章
2008/09/30 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
node.js require() 源码解读
2015/12/13 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python中的getopt函数使用详解
2015/07/28 Python
python妙用之编码的转换详解
2017/04/21 Python
Python探索之创建二叉树
2017/10/25 Python
tensorflow获取变量维度信息
2018/03/10 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
元旦晚会主持词
2014/03/24 职场文书
优秀教师推荐材料
2014/12/16 职场文书
2019年工作总结范文
2019/05/21 职场文书