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插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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常用的小程序代码段
2015/11/14 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
gearman的安装启动及python API使用实例
2014/07/08 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
Python yield的用法实例分析
2020/03/06 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
Python同时处理多个异常的方法
2020/07/28 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
生物专业个人自荐信范文
2013/11/29 职场文书
合同协议书格式
2014/04/18 职场文书
高中化学教学反思
2016/02/22 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
详解MySQL集群搭建
2021/05/26 MySQL