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 ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jquery制作的移动端购物车效果完整示例
Feb 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
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
Javascript基础知识盲点总结之函数
2016/05/15 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
python版学生管理系统
2018/01/10 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Python求凸包及多边形面积教程
2020/04/12 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
python os.rename实例用法详解
2020/12/06 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
单位消防安全制度
2014/01/12 职场文书
2014新年寄语
2014/01/20 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
优秀家长自荐材料
2014/08/26 职场文书
党员检讨书
2014/10/13 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
KTV员工管理制度
2015/08/06 职场文书
Consul在linux环境的集群部署
2022/04/08 Servers
nginx七层负载均衡配置详解
2022/07/15 Servers