vue中如何在图片的旁边写字

在Vue中，要在图片的旁边显示文字，你可以使用组件结合`v-bind`指令来实现这个效果。下面是一个简单的例子，假设我们有一个`ImageAndText`自定义组件：

<template>
  <div class="image-container">
    <img :src="imageSrc" alt="图片描述" />
    <p v-bind:class="{ 'text-right': alignRight }">{{ text }}</p>
  </div>
</template>

<script>
export default {
  props: {
    imageSrc: {
      type: String,
      required: true
    },
    text: {
      type: String,
      required: true
    },
    alignRight: {
      type: Boolean,
      default: false
    }
  }
}
</script>

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

.text-right {
  margin-left: auto;
}
</style>

在这个组件中，`imageSrc`和`text`是props，用于接收父组件传递的图片路径和文字内容。`alignRight` prop控制文字是否向右对齐。

在父组件里使用这个组件并传入数据：

<template>
  <ImageAndText :image-src="yourImageUrl" :text="yourText" align-right/>
</template>

<script>
import ImageAndText from './components/ImageAndText.vue';

export default {
  components: {
    ImageAndText
  },
  data() {
    return {
      yourImageUrl: 'path/to/image.jpg',
      yourText: '这是图片的文字说明'
    };
  }
};
</script>