vue有一行文本两个按钮一个红色按钮一个蓝色按钮点击红色按钮文本变为红色，点击蓝色按钮变为蓝色

在Vue.js中，你可以创建一个模板，结合双向数据绑定、自定义事件和条件渲染来实现这个功能。下面是一个简单的实现步骤：

1. 首先，创建一个Vue组件，例如`TextButton.vue`：

<template>
  <div class="container">
    <p :style="{ color: buttonColor }">{{ buttonText }}</p>
    <button @click="setButtonColor('red')">红色按钮</button>
    <button @click="setButtonColor('blue')">蓝色按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttonText: '初始文本',
      buttonColor: 'black', // 默认颜色
    };
  },
  methods: {
    setButtonColor(color) {
      this.buttonColor = color;
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
}
</style>

2. 然后在模板里，`p`标签的`style`属性绑定了`buttonColor`的数据，显示的文字颜色由`buttonColor`决定。

3. 当点击红色或蓝色按钮时，调用`setButtonColor`方法，设置`buttonColor`变量，从而改变`p`标签的颜色。

当你运行这个组件时，点击红色按钮会使文本变为红色，点击蓝色按钮变回蓝色。