vuejs2.0如何获取dom元素自定义属性值
1.设置定义属性值 :data-value=".."
<ul class="header-ul">
<li class="flexcss" v-for="(list,index) in child" :data-value="list.name" @click="changeContent(index,list.name)">{{list.name}}</li>
</ul>
methods: {
changeHeaderContent(index,name){
console.log('cht',index)
console.log('chaname',name)
}
2.直接获取
<div class="c-img-box" @click="gotoDetail(name)" :data-value="name">
data () {
return {
msg: 'Welcome to Your Vue.js App',
name:'czj',
}
},
gotoDetail:function(ev){
console.log(ev);
},
3.通过this.$refs.***获取
1.目标DOM定义ref值:

2.通过 【this.$refs.***.属性名】 获取相关属性的值:
this.$refs.*** 获取到对应的元素

vuejs2.0如何获取dom元素自定义属性值的更多相关文章
- (四)Jsoup 获取 DOM 元素属性值
第一节: Jsoup 获取 DOM 元素属性值 Jsoup获取DOM元素属性值 比如我们要获取博客的href属性值: 我们这时候就要用到Jsoup来获取属性的值 : 我们给下示例代码: package ...
- Jsoup(四)-- Jsoup获取DOM元素属性值
1.获取博客园的博客标题以及博客地址,获取友情链接 2.代码实现: public static void main(String[] args) throws Exception{ // 创建http ...
- vue 组件传递值以及获取DOM元素的位置信息
1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...
- React 点击删除列表中对应项(React 获取DOM中自定义属性)
点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框( ...
- 获取DOM元素位置和尺寸大小
JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...
- vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- angular学习笔记-angular中怎么获取dom元素
步骤分解: 第一步:给要获取的元素一个ng-model变量,并且绑定事件啦! <div class="home" ng-model="dirName" n ...
- vue获取dom元素注意问题
mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...
- vue获取dom元素高度的方法
获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...
随机推荐
- 爬虫与request模块
一.爬虫简介 1.介绍 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁. ...
- luogu P2071 座位安排
这个题可以被分为两部分 1.匈牙利算法(板子) 2.邻接表存图(好像这不能称为第二部分) 每一排能坐两个人,那就把一排拆成两个点, 用匈牙利算法求最大匹配 每个人都只想坐两排,说明每个人只会连四条边 ...
- 2.8 hashlib模块
- XUGUO-书呆子-搜索书箱
WorldCat 上的 米塔斯 通过图书馆馆藏的全球目录WorldCat,在附近的图书馆中查找所要的资料. < 用 Sketch 创作 Airiti Library華藝線上圖書館 BookBub ...
- Redis学习笔记(三)使用Lua脚本实现分布式锁
Redis在2.6推出了脚本功能,允许开发者使用Lua语言编写脚本传到Redis中执行. 使用Lua脚本的好处如下: 1.减少网络开销:本来5次网络请求的操作,可以用一个请求完成,原先5次请求的逻辑放 ...
- MyEclipse 2015 Stable 2.0破解方法
本篇博文简单介绍一下利用网上说明的方法破解MyEclipse 2015 Stable 2.0的具体细节.因为原来在贴吧上的方法不够详细,所以本人重新整理了一下.方法源自:http://tieba.ba ...
- [再寄小读者之数学篇](2014-04-08 from 1297503521@qq.com $\sin x-x\cos x=0$ 的根的估计)
(2014-04-08 from 1297503521@qq.com) 设方程 $\sin x-x\cos x=0$ 在 $(0,+\infty)$ 中的第 $n$ 个解为 $x_n$. 证明: $$ ...
- PHP 【五】
函数 如要在页面加载时执行脚本,可以把它放到函数里 函数是通过调用函数来执行的 可在页面的任何位置调用函数 <?phpfunction functionName(){ // 要执行的代码} ...
- Web应用程序的敏感信息-隐藏目录和文件
Web应用程序的敏感信息-隐藏目录和文件 0x1.场景 Web应用程序根文件夹中可能存在大量隐藏信息:源代码版本系统文件夹和文件(.git,.gitignore,.svn),项目配置文件(.npmrc ...
- Selenium Locating Elements
Locating Elements Location Methods: find_element_by_id find_element_by_name find_element_by_xpath fi ...