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

作者站长头像
站长
· 阅读数 7

下面的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>

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

希望获得一个按什么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>
回复
1个回答
avatar
test
2024-07-06

既然都使用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 思否面试闯关挑战赛，欢迎正在阅读的你也加入。
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容