v-html后数据的显示隐藏

v-html表示出来的，但是项目要对产生的数据进行部分显示隐藏

demo

<template> <div> <div :style="{ height: '500px',overflow: visible?'visible':'hidden'}"> 这是一大堆内容 这是一大堆内容 这是一大堆内容 这是一大堆内容 这是一大堆内容 这是一大堆内容 这是一大堆内容 这是一大堆内容 这是一大堆内容 <button @click="show"></button> </div> </div> </template> <script> export default { 
  name:'demo', data(){ 
    return{ 
      description: 'demo',
      visible: false,
    }
  }, methods:{ 
    show(){ 
      this.visible = !this.visible
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

例子：

template里

<div v-html="title" :style="{height: visible?'150px':'auto',overflow: 'hidden'}" @click="show"></div>

js里

export default { 
  name:'demo',
  data(){ 
    return{ 
      description: 'demo',
      visible: false,
    }
  },
  methods:{ 
    show(){ 
      this.visible = !this.visible
    }
  }
}