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+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jQuery实现电梯导航模块
Dec 22 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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上传图片存入数据库示例分享
2014/03/11 PHP
PHP缓冲区用法总结
2016/02/14 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
jQuery操作cookie
2016/08/08 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
Python表示矩阵的方法分析
2017/05/26 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
python剪切视频与合并视频的实现
2020/03/03 Python
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
团日活动策划书
2014/02/01 职场文书
创业资金计划书
2014/02/06 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
Java中try catch处理异常示例
2021/12/06 Java/Android