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中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
jQuery实现手风琴特效
Jan 11 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
终于听上了直流胆调频
2021/03/02 无线电
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
javascript中undefined与null的区别
2015/08/16 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
Python面向对象class类属性及子类用法分析
2018/02/02 Python
Python中is和==的区别详解
2018/11/15 Python
python调用java的jar包方法
2018/12/15 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
Python实现区域填充的示例代码
2021/02/03 Python
简单通用的简历自我评价
2014/09/21 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书