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实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jquery.pager.js分页实现详解
Jul 29 jQuery
jquery css实现流程进度条
Mar 26 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
使用jquery实现轮播图效果
Jan 02 jQuery
jquery插件实现代码雨特效
Apr 24 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
Banner程序
2006/10/09 PHP
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
php实现webservice实例
2014/11/06 PHP
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
JS 常用校验函数
2009/03/26 Javascript
js更优雅的兼容
2010/08/12 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
jquery.uploadView 实现图片预览上传功能
2017/08/10 jQuery
Koa代理Http请求的示例代码
2018/10/10 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
python对html代码进行escape编码的方法
2015/05/04 Python
python下载图片实现方法(超简单)
2017/07/21 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
应届生个人求职信模板
2013/11/26 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
幸福来敲门观后感
2015/06/04 职场文书
大学生军训感言
2015/08/01 职场文书