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 ...
随机推荐
- 在本机使用虚拟机安装一个linux系统,并搭建ftp服务器
一.Linux基础使用:linux服务器环境搭建(FTP服务器), 在本机使用虚拟机安装一个linux系统,并搭建ftp服务器,要求能使用ftp服务将本机文件到保存linux虚拟机上 资料: VMwa ...
- Android学习第九天
为什么需要内容提供者 a) 如何创建数据库 b) 文件权限 c) Chmod linux修改权限 内容提供者原理 a) 内容提供者把数据进行封 ...
- POJ - 3616 Milking Time (动态规划)
Bessie is such a hard-working cow. In fact, she is so focused on maximizing her productivity that sh ...
- 映像文件工具srec
目录 映像文件工具srec 介绍与帮助 常用例子 常用选项 一个实际的例子 hex转bin 数据填充 文件合并 文件分割 加入CRC 查看信息 使用命令集合的文本 详细文件格式的描述 附录:MDK的例 ...
- Centos 7最小化部署apollo
https://github.com/nobodyiam/apollo-build-scripts
- springmvc 项目单元测试
对于web项目如果希望通过url来进行单元测试,但是启动服务器和建立http client 来进行测试非常麻烦,并且依赖网络环境.这样我们可以通过引入MockMvc进行测试. 一.引入jar包 < ...
- phpstorm快捷键大全
前言:这段时间换了编辑器,所以挺多命令也改变了 转载来自:https://www.jianshu.com/p/ffb24d61000d?utm_campaign=maleskine&utm_c ...
- iTOP-iMX6开发板-Android-can测试例程介绍
TOP-iMX6开发板的 Android 源码的 can 例程包含在 Android 源码中,在“ packages/apps/”目 录下,如下图所示,这个是应用界面的源码. 如下图所示,can ...
- Kotlin 检查空类型
Kotlin 会检查你定义的非空类型 如果运行过程中被赋空值了 会直接crash
- 人体姿势识别,Convolutional pose machines文献阅读笔记。
开源实现 https://github.com/shihenw/convolutional-pose-machines-release(caffe版本) https://github.com/psyc ...