维护相同的状态变量以实现显示更多/更少功能

import React, { useState } from 'react';

function ExpandableContent({ content }) {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div>
      <p>{isExpanded ? content : content.slice(0, 50) + '...'}</p>
      <button onClick={() => setIsExpanded(!isExpanded)}>
        {isExpanded ? '显示更少' : '显示更多'}
      </button>
    </div>
  );
}

export default ExpandableContent;

<template>
  <div>
    <p>{{ isExpanded ? content : content.slice(0, 50) + '...' }}</p>
    <button @click="toggleExpand">{{ isExpanded ? '显示更少' : '显示更多' }}</button>
  </div>
</template>

<script>
export default {
  props: ['content'],
  data() {
    return {
      isExpanded: false
    };
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    }
  }
};
</script>