vue中ref获取不到dom问题解决，关于this.$nextTick的使用

Posted 2023-04-18

参考技术A

注意：本篇没有干货
ref有以下用法用法：
1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

　　3、利用 v-for 和 ref 获取一组数组或者dom 节点
效果图：

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted() 钩子中调用，或者在 this.$nextTick(()=>) 中调用。

vue 问题笔记 ref获取不到指定的DOM节点问题解决

Vue双向数据绑定

v-model：双向数据绑定必须在表单中使用，input，select等

v-on:click 简写 @click  ：事件绑定，方法放到methods中

ref="userInfo"   ：   给标签设置ref属性，可在js中通过this.$refs获取到相应dom节点

this.$refs.userInfo：可以获取到dom节点，之后可获取dom 的值，也可以设置dom 的style等属性

 

 

<template>
  <div id="app">
    <div>
      {{msg}}
      <br>
      <input v-model="msg" ref="info">
      <button v-on:click="getMsg()">获取msg</button>
      <button @click="setMsg()">设置msg</button>
      <button @click="getRef()">通过$refs获取值</button>
      <button @click="setRef()">通过$refs设置属性</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      msg: "Hello Vue"
    };
  },
  methods: {
    getMsg() {
      alert(this.msg);
    },
    setMsg(){
      this.msg="新值";
    },
    getRef(){
      alert(this.$refs.info.value)
    },
    setRef(){
      this.$refs.info.style.color="red";
    }
  }
};
</script>

<style lang="scss">
.red {
  color: red;
}
.redA {
  background: red;
}
</style>