vue2 ref17 $refs 操控dom 案例

在vue中不建议安装jquery

在vue中操控dom可以用ref方法

 每一个ref对象中都包含一个$refs对象，组件的$refs对象都指向一个空对象

<button @click="clg" class="red">打印</button>
methods: {
    clg(){
      console.log(this);
    },
  },

　　

 

 

 ref操控dom

<h1 ref="my">111</h1>
clg(){
      console.log(this);
      console.log(this.$refs.my);
      this.$refs.my.style.color = 'red'
    },
 
 
案例：
子：
<p ref="reset">值：{{cont}}</p>
<button @click="jia">+1</button>
 
data() {
    return {
      cont:0,
    }
  },
 
methods: {
    jia(){
      this.cont += 1
    },
  },
 
父：
<hello ref="com" @fromCount="getCount"></hello>
 <button @click="reset">重置</button>
 
import hello from '@/components/HelloWorld.vue'
 
methods: {
    reset(){
      this.$refs.com.cont = 0
    },
  },
 
 
 
按需填写案例：
    <input type="text" placeholder="999感冒灵" v-if="inputVi" @blur="showinpu" autofocus>
    <button v-else @click="inpu">展示</button>
 
data() {
    return {
      inputVi: false,
    }
  },
  methods: {
    inpu() {
      this.inputVi = true
    },
    showinpu() {
      this.inputVi = false
    },
  },
 
ref写法：
　　$nextTick:将代码延迟到下一个dom的更新周期后实行
　　focus()：自动获取焦点
    <input type="text" placeholder="999感冒灵" v-if="inputVi" @blur="showinpu"  ref="iptRef">
    <button v-else @click="inpu">展示</button>
 
data() {
    return {
      inputVi: false,
    }
  },
  methods: {
　inpu() {
      this.inputVi = true
      this.$nextTick(()=>{
        this.$refs.iptRef.focus()
      })
    },
    showinpu() {
      this.inputVi = false
    },
  },
posted @ 2022-11-29 17:07  文采呱呱  阅读(110)  评论(0)    收藏  举报