vue获取属性值

vue获取属性值的方式

千次阅读 2019-11-04 11:03:27

vue的一个优势是通过数据绑定减少直接DOM操作，不过有时候需要获取某个标签的属性或设置某个标签的样式，那么其方式如下： 1. 通过$refs获取 <button @click="toHide" ref="mybtn" data-msg="HIDE">按钮<...

vue的一个优势是通过数据绑定减少直接DOM操作，不过有时候需要获取某个标签的属性或设置某个标签的样式，那么其方式如下：

1. 通过$refs获取

<button @click="toHide" ref="mybtn" data-msg="HIDE">按钮</button>

methods:{
    toHide(){
        let msg = this.$refs.mybtn.dataset.msg;   // 获取自定义属性值
        console.log(msg); 
        this.$refs.mybtn.style.display = 'none';  // 设置该标签样式
    }      
}

2. 通过e.target.dataset.***或e.target.getAttribute('data-***')获取

<button @click="sayHi" data-msg="Hi">say hi</button>

methods:{
    sayHi(e){
        console.log(e.target.dataset.msg);  // 获取了自定义属性data-msg的值
    }
}

3. 作为参数传递

<button @click="say('hi')"> say hi</button>
methods:{
    say(msg){
        console.log(msg);  // 获取到参数传来的值
    }
}

收起

展开全文

VUE获取自定义属性值data自定义属性值获取
千次阅读 2020-01-30 22:07:20
vue.js获取data-*自定义属性值 e.srcElement.dataset.idx e.srcElement.dataset.idx，inx是自定义属性名，也许用的到
```
vue.js获取data-*自定义属性值

e.srcElement.dataset.idx

e.srcElement.dataset.idx，inx是自定义属性名，也许用的到

 
```
收起
展开全文

Vue定义属性获取属性值

2019-03-20 21:18:23

<!DOCTYPE html> <... <head> ...meta charset="UTF-8">...script type="text/javascript" src="js/vue.js"></script> <title></title> </head> &l...

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/vue.js"></script>
		<title></title>
	</head>
	<body>
    <h1>component-1</h1>
    <hr>
    <!--指令是绑定在标签属性-->
    <!--template标签 -->
    
    <div id="app">
    	<!--属性有-线 ,构造器里需要驼峰-->
		<panda :here="message"></panda>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
            	message:'china'
            },
            components:{
            	"panda":{
    				template:`<div style="color:green">Panda from {{here}}</div>`,
    				//注册属性
    				props:['here']
            	}
            }
        })
    </script>
</body>
</html>

收起

展开全文

vue 获取自定义属性值

2021-04-06 16:19:42

vue 获取自定义属性值的跟触发事件的属性 <div class="ku-menu-item-group" :data-route="item.route" @click="toRoute"> <i class="el-icon-menu"></i> <span class="ku-menu-collapse">...

vue 获取自定义属性值
  <div class="ku-menu-item-group" :data-route="item.route" @click="toRoute">
       <i class="el-icon-menu"></i>
       <span class="ku-menu-collapse"><i class="el-icon-arrow-right"></i></span>
  </div>

说明：data-route 为自定义属性
 // 方法集合
    methods: {
      toRoute: function (e) {
        let route = e.currentTarget.getAttribute("data-route")
        console.log(route);
      }
    }

收起

展开全文

vue获取input的属性_Vue 获取自定义属性的值
2021-03-07 07:24:35
在jquery中，如果要获取 data-***的值可以通过$('目标元素').data('属性名')来获取。在Vue中如何获取该值呢？1.换个思路，作为参数传递。如下代码：say himethods: {say(message){console.log(message)}}2.通过e....
收起
Vue 获取自定义属性的值
万次阅读 2018-11-12 19:12:00
在jquery中，如果要获取 data-*** 的值可以通过 $('目标元素').data('属性名') 来获取。在Vue中如何获取该值呢？ 1.换个思路，作为参数传递。如下代码： <button @click="say('Hi')">...
收起
js获取不到 vue 自定义属性绑定_vue.js 获取当前自定义属性值
2021-01-14 15:39:44
这篇文章主要为大家详细介绍了vue.js 获取当前自定义属性值，具有一定的参考价值，可以用来参考一下。感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！假设有一个标签h5, 我们给它添加了一个自定义属性值...
收起
Vue动态绑定属性和动态获取属性值
千次阅读 2020-07-09 21:18:16
基本不用写前端了，虽然Vue不太会，Jquery还是会点的，Jquery可以动态绑定设定值，作为Vue这么牛逼优秀的框架，会不支持动态绑定？我今天快被合作的前端小哥给气到了，不行必须得写出来，太气人了，做后端的帮你搞定...
收起
vue获取css内容进行替换_vue 获取dom的css属性值
2020-12-30 19:42:11
export default {name: "center",mounted() {//div 标签获取的方法let topInfowidth = this.$refs.topInfo.style.width;let topInfoheight = this.$refs.topInfo.style.height;console.log("topInfo:"+topInfowidth+...
收起
vue获取自定义属性的值,标签的值
千次阅读 2020-10-23 11:32:15
自定义属性为data-val，通过e.target.getAttribute（）获取。 <span data-val="0" @click="getVal0">点我</span> getVal0(e){ console.log(e.target.getAttribute('data-val')); }, 方式...
收起
elementui
vue2.0获取自定义属性的值
2020-08-31 00:11:49
主要为大家详细介绍了vue2.0如何获取自定义属性的值，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
收起
Vue获取DOM元素的属性值
千次阅读 2018-11-21 15:52:00
在vue中如何获取到DOM元素距离窗口顶部的值呢？ 1.通过$event获取 html： <div class="sort-item" @click="showFilter($event)"> {{currentFilter}} <div class=...
收起
vue获取input的属性_vue如何获取自定义元素属性参数值的方法
2020-12-19 06:59:04
如果你是想获取data-num的数据，可以这样写：55getData:function (e,num) {console.log(num)}这样就可以取到这个值了，如果你是确实想操作DOM，那你可以这样写：55getData:function (e) {console.log(this.$refs....
收起
vue.js获取object的属性值
2018-10-18 07:51:49
![图片说明](https://img-ask.csdn.net/upload/201810/18/1539849025_957028.png) vue获取的对象中有属性值，直接使用this.object.属性获取值为空，如何获取属性值？
收起
vue获取dom元素自定义属性值
2021-03-05 16:54:24
<div id="app"> <button drug_code="100" @click="getData($event)">点</button> </div> methods : { getData (e) { console.log(e.target.getAttribute(‘drug_code‘));...}
收起
vue获取标签上的属性值
万次阅读 2019-04-26 10:13:52
方法一： <div id="app"> <button @click="getData($event,'100')">点我</button> </div> methods : { getData(e,num) { console.log(num); // 输出 100 ...<...
收起
vue 获取dom的css属性值
2019-10-03 23:33:07
} //获取dom元素高度通过在标签里面定义ref属性，用this.$refs.自定义名称.offsetHight;去获取。 } #topInfo{ overflow: hidden; } 　 let imgInfo = this.$refs.imgInfo; console.log(imgInfo) if ...
收起
js获取不到 vue 自定义属性绑定_vue如何获取自定义元素属性参数值的方法
2021-03-03 15:23:52
如果你是想获取data-num的数据，可以这样写：55getdata:function (e,num) {console.log(num)}这样就可以取到这个值了，如果你是确实想操作dom，那你可以这样写：55getdata:function (e) {console.log(this.$refs....
收起