vue 点击当前字体变色,超出盒子宽度下拉展示

你可以使用 Vue 的指令和样式来实现这个功能。首先，在 HTML 中添加一个包含文本的 div，并使用 v-bind 指令将它的 class 绑定为一个数组，数组中包含一个对象，用于判断是否需要添加特定的 class：

<div v-bind:class="[{'active': isActive}]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis leo eu nisl dignissim sodales. Sed ut pellentesque dolor.</div>

接下来，在 Vue 实例中定义 isActive 变量，并创建一个函数来处理点击事件：

new Vue({
  el: '#app',
  data: {
    isActive: false
  },
  methods: {
    toggleActive: function () {
      this.isActive = !this.isActive;
    }
  }
});

在 CSS 中，你可以使用 overflow 属性来控制当文本超出盒子宽度时是否显示滚动条：

div {
  width: 200px;
  height: 100px;
  overflow: auto;
}

div.active {
  color: red;
}

这个例子中，当 isActive 为 true 时，div 元素会添加一个名为 active 的 class，这个 class 会将文本颜色变为红色。当文本内容超出 div 的宽度时，div 会显示滚动条。最后，使用 v-on 指令将点击事件与 toggleActive 函数绑定：

<div v-bind:class="[{'active': isActive}]" v-on:click="toggleActive">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis leo eu nisl dignissim sodales. Sed ut pellentesque dolor.</div>