Vue获取DOM元素并设置样式，获取 Input 值

方式一：使用jQuery方法获取

1、直接给相应的元素加id，再使用document.getElementById("id");获取到该元素

<template>
  <div class="app-container">
    <el-button style="margin-top: 6px;" id="btn" @click="getDOM()">获取DOM元素</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    getDOM() {
      const btns = document.getElementById('btn')
      console.log(btns)
      if (btns) { // 如果不给判断有可能会报错：TypeError: Cannot read property 'style' of null
        btns.style.color = 'red'
      }
    }
  }
}
</script>

 如果不给if (btns)判断有可能会报以下错误

 2、直接给相应的元素加class，再使用document.getElementsByClassName('filter-item');获取到该元素

<template>
  <div class="app-container">
    <el-button style="margin-top: 6px;" class="filter-item">点击获取DOM元素后改变字体颜色为红色</el-button>
    <el-button style="margin-top: 6px;" class="filter-item" @click="getDOM()">获取DOM元素</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    getDOM() {
      const btn = document.getElementsByClassName('filter-item')[1]
      console.log(btn)
      if (btn) { // 如果不给判断有可能会报错：TypeError: Cannot read property 'style' of null
        btn.style.color = 'red'
      }
    }
  }
}
</script>

方式二：使用ref方法获取

给相应的元素加ref="name"，再使用this.$refs.name获取到该元素

<template>
  <div class="app-container">
    <el-button style="margin-top: 6px;" ref="btn" @click="getDOM()">获取DOM元素</el-button>
  </div>
</template>

<script>
export default {
  mounted() {
    // 装载数据之后
    this.btns = this.$refs.btn
  },
  methods: {
    getDOM() {
      console.log('方法一，使用mounted装载数据之后：')
      console.log(this.btns.$el)
      console.log('----------分----------割----------线----------')
      console.log('方法二，直接使用this.$refs.btn.$el方法：')
      console.log(this.$refs.btn.$el)
      this.$refs.btn.$el.style.color = 'red'
    }
  }
}
</script>

获取 Input 值 

<template>
  <div class="app-container">
    <el-input type="text" value="获取input值" ref="inputVal"/>
    <el-button style="margin-top: 6px;" @click="get()">获取</el-button>
    <br>
    <span>{{ result }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      result: ''
    }
  },
  methods: {
    get: function () {
        this.result = this.$refs.inputVal.value + " 成功!";
    },
  }
}
</script>