大家好，我需要一些帮助来使用 quasar 和 vuejs 实现显示更多按钮

Question

我有这部分代码，我需要添加动作来显示更多或更少的文本。

<q-card
          class="my-card text-white"
          style="background: radial-gradient(circle, #229954 20%, #014a88 90%)"
        >
          <q-card-section>
            <div class="text-h6">{{ titulo }}</div>
          </q-card-section>

          <q-card-section class="q-pt-none">
            {{ traducir}}
          </q-card-section>
           <q-card-actions>
            <q-btn flat label="Show More" />
          </q-card-actions>
        </q-card>

Answer 1

首先添加调用 toggleText 方法的点击事件，然后向要切换的部分添加条件 v-if

<q-card
          class="my-card text-white"
          style="background: radial-gradient(circle, #229954 20%, #014a88 90%)"
        >
          <q-card-section>
            <div class="text-h6">{{ titulo }}</div>
          </q-card-section>

          <q-card-section v-if="showText" class="q-pt-none">
            {{ traducir}}
          </q-card-section>
           <q-card-actions @click="toggleText">
            <q-btn flat label="Show More" />
          </q-card-actions>
        </q-card>

然后您创建将在我们的 v-if 条件中使用的布尔变量然后创建切换布尔值的 toggleText 方法。

<script>
export default {
  name: 'showmore',
  data () {
    return {
      showText: false,
    }
  },
  methods: {
    toggleText () {
      this.showText = !this.showText;
    }
  }
}
</script>

大家好，我需要一些帮助来使用 quasar 和 vuejs 实现显示更多按钮

Hello everyone, i need some help to implement a show more button with quasar and vuejs

vue.js

quasar