一、vue通过$refs获取到dom对象（获得dom对象改变里面的内容）
代码语言：javascript
复制模板：
<button @click="getdata">获取dom对象</button>
<div ref="mydiv">这是一个div</div>
js：
methods: {
getdata: function() {
//在这个方法中通过vue形式获取到div的对象，比js和jq都方便
console.log(this.$refs.mydiv);
//改变div里面的innerText内容
this.$refs.mydiv.innerText = "修改以后的值";
}
}
二、获取当前点击对象的内容
代码语言：javascript
复制模板：
<ul>
<li v-for="(item,index) in tabList" v-on:click="addClass(index,$event)">{{item.title}}</li>
</ul>
JS:
data() {
return {
tabList: [
{ id: 0, title: "首页1" },
{ id: 1, title: "首页2" },
{ id: 2, title: "首页3" }
],
current: 0
};
},
methods: {
addClass: function(index,event) {
this.current = index;
//获取点击对象
var el = event.currentTarget;
console.log("当前对象的内容：" el.innerHTML);
console.log(this.current)
}
}
三、this对象
- 组件对象
代码语言：javascript
复制模板：
<button v-on:click="getMessage">获取message的值</button>
JS:
data() {
return {
myPhone: 123456
};
},
methods: {
// 箭头函数的this指向了window，其实应该指向vue的实例
// 普通函数
getMessage: function() {
alert(this.myPhone);
console.log(this); // 指向Vue的实例
}
}
- window对象
