vue获取dom元素值

来源:互联网 发布:罗湖网站建设优化 编辑:程序博客网 时间:2024/06/17 03:36

1、通过refs来获取dom元素内容
2、需要利用到jq,但是不支持,学习vue.js,都说需要抛弃jq,否则会禁锢你的思想


通过refs方法

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例。这里主要是介绍在普通dom元素上使用。看下面的例子:

无论是点击aa还是bb都能获取到类名为aa的元素值。

HTML

<div id="App">     <div class="aa" ref="menuItem" @click="aa($event)">aa</div>     <div @click="bb">bb</div></div>

JS

<script>     new Vue({          el: '#App',          methods: {               bb: function() {                    var getMenuText = this.$refs.menuItem.innerText;                    console.log(getMenuText);//aa               },               aa: function(e) {                    var el = e.target;                    console.log(el);//<div class="aa">aa</div>               }          }     })</script>

通过jq方式

个人见解:两种方式并用,感觉有点冗余。话不多说,看上面的例子,aa的点击事件

var el = e.target;// 当前元素,可修改(利用jq,可获取到他的子元素)var el = e.currentTarget; //当前元素,不可修改(不能用此方法获取到他的子元素)
原创粉丝点击