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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
jQuery实现电梯导航模块
Dec 22 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
document.createElement()用法
2013/03/13 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
微信小程序后台持续定位功能使用详解
2019/08/23 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
python实现感知器算法详解
2017/12/19 Python
Python实现k-means算法
2018/02/23 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
PyQt5实现画布小程序
2020/05/30 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
函授毕业生的自我鉴定
2013/11/26 职场文书
法制宣传教育方案
2014/05/09 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS