vue 点击展开显示更多(点击收起部分隐藏)

在vue中实现点击展开显示更多的功能，可以通过v-if指令，配合data中变量的值来控制元素的显示和隐藏。具体步骤如下：

1. 在data中定义变量，用于控制元素的显示和隐藏：

data() {
  return {
    showMore: false
  }
}

2. 在模板中使用v-if指令，根据showMore的值控制元素的显示和隐藏：

<div>
  <p>
    这是一段内容，如果超过一定的长度，就会显示更多的部分。
    <span v-if="!showMore" @click="showMore = true">...展开全文</span>
  </p>
  <p v-if="showMore">这是更多的内容，可以展开。 <span @click="showMore = false">收起</span></p>
</div>

3. 在点击“展开全文”和“收起”时改变showMore的值，来实现展开和收起功能：

methods: {
  showMore() {
    this.showMore = true
  },
  hideMore() {
    this.showMore = false
  }
}

完整代码如下：

<template>
  <div>
    <p>
      这是一段内容，如果超过一定的长度，就会显示更多的部分。
      <span v-if="!showMore" @click="showMore = true">...展开全文</span>
    </p>
    <p v-if="showMore">这是更多的内容，可以展开。 <span @click="showMore = false">收起</span></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMore: false
    }
  },
  methods: {
    showMore() {
      this.showMore = true
    },
    hideMore() {
      this.showMore = false
    }
  }
};
</script>

在以上代码中，我们使用了v-if指令来根据showMore的值来控制元素的显示和隐藏。当showMore为false时，显示“...展开全文”的链接；当showMore为true时，显示更多的内容，并显示“收起”的链接。

通过点击链接，调用对应的方法来改变showMore的值，实现展开和收起的功能。