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 23 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery实现高级检索功能
May 28 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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目录操作函数之获取目录与文件的类型
2010/12/29 PHP
PHP多进程编程实例
2014/10/15 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
javascript 写类方式之一
2009/07/05 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
2009/11/24 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
星球大战与Python之间的那些事
2016/01/07 Python
Python中property属性实例解析
2018/02/10 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
python实现扫雷游戏
2020/03/03 Python
详解python datetime模块
2020/08/17 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
人力资源主管岗位职责
2014/01/29 职场文书
学生打架检讨书
2014/02/14 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
党支部综合考察材料
2014/05/19 职场文书
离婚上诉状范文
2015/05/23 职场文书
追讨欠款律师函
2015/06/24 职场文书
python前后端自定义分页器
2022/04/13 Python