vuejs中如何更好的实现一个与下方同样效果的button？

Question

下面的vue代码是在input中输入什么，就在《p》中显示什么

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    onInput(e) {
      this.text = e.target.value
    }
  }
}
</script>

<template>
  <input :value="text" @input="onInput" placeholder="Type here">
  <p>{{ text }}</p>
</template>

希望获得一个按什么button，就能显示button上的文字的效果，，我觉得应该就是怎么获取click 事件里button的attribute的问题，

我自己目前用的是这样写的，不知有没有更好的写法？

export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    change_task(task_type){
      //console.log(task_type)
      this.text=task_type;
    }
  }
}
</script>

<template>
  <button @click="change_task('A')" >A</button><br /><br />

    <button @click="change_task('B')">B</button>
  <p>{{ text }}</p>
</template>

Answer 1

既然都使用Vue就不需要并且也少操作DOM了

其实可这样:

<script>
export default {
  data() {
    return {
      text: '',
        buttonName: '我是按钮'
    }
  },
  methods: {
    getText(e) {
      this.text = this.buttonName
    }
  }
}
</script>

<template>
  <button @click="getText" >{{ buttonName }}</button>
  <p>{{ text }}</p>
</template>

更可以这样:

<script>
export default {
  data() {
    return {
        buttonName: '我是按钮'
    }
  },

}
</script>

<template>
  <button >{{ buttonName }}</button>
  <p>{{ buttonName }}</p>
</template>

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

并不需要获取 button 组件的 attribute 值，只需要你在绑定事件的时候把对应的值传入就可以了。在学习 Vue/React 的过程中需要摒弃原来获取DOM/操作DOM的思维。

比如说这样的一个伪代码：

<script>
export default {
  data() {
    return {
      btnText:'这是一个按钮',
      visibleText: ''
    }
  },
  methods: {
    onBtnClick(value) {
      this.visibleText = value
    }
  }
}
</script>

<template>
  <div>
    <button @click="onBtnClick(btnText)">{{ btnText }}</button>
    <p>{{ visibleText }}</p>
  </div>
</template>

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 3

楼上都说了，那我就说如果从 dom 上拿吧。

<button @click="visibleText = $event.target.innerText">{{ btnText }}</button>
<p>{{ visibleText }}</p>

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。