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 29 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
jquery实现点击左右按钮切换图片
Jan 27 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之字符串变相相减的代码
2007/03/19 PHP
php 错误处理经验分享
2011/10/11 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
python实现的简单文本类游戏实例
2015/04/28 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
python如何为创建大量实例节省内存
2018/03/20 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
python版DDOS攻击脚本
2019/06/12 Python
Django 返回json数据的实现示例
2020/03/05 Python
Python ATM功能实现代码实例
2020/03/19 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
应聘收银员个人的求职信
2013/11/30 职场文书
合同专员岗位职责
2013/12/18 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
国际贸易系求职信
2014/08/09 职场文书
测量员岗位职责
2015/02/14 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python