javascript - 我无法使用 javascript 和 vue.js 从跨度中获取文本进行一次 chop

Question

我想创建一个带有按钮的 chop ，以获取 vue.js 和 javascript 中的更多信息，但是当我使用 javascript 获取值时，它向我发送 null，我一直在检查以及我发出请求的方式是正确的，这是如何得到的代码:

html:

   <div class="col-lg-10 ">
        <span>{{video.description}}</span>
        <button type="button" id="info" name="button">more inf...</button>
   </div>

vue.js

export default {
 mounted(){
       var lengthText = 90;
//Aqui en la variable text guardas el texto antes de ocultarlo
var text = $('span').text();
var shortText = $.trim(text).substring(0, lengthText).split(" ").slice(0, -1).join(" ") + "...";
console.log(text);
console.log(shortText);
$('span').text(shortText);
//entonces para mostrarlo nuevamente solo necesitas mostrar la variable text
$('button').click(function(event) {
  $('span').text(text);
});
  }
}

它不会在底部进行 chop 或操作我真的很感激你可以帮助我解决这个问题

Answer 1

你完全没有理解 Vue 的要点。除非有一些特殊情况(主要是依赖 jQuery 使用的第三方插件)，在 Vue 组件中看到 jQuery 代码意味着您正在做一些错误的事情。

这是使用 Vue 功能来实现您的目标的重写:

<div class="col-lg-10 ">
    <span v-if="showMoreInfo">{{ description }}</span>
    <span v-else>{{ shortDescription }}</span>

    <button v-if="!showMoreInfo" @click="moreInfo">more info...</button>
</div>

export default {
    data: function() {
        return {
            description: 'This is my long, long description.',
            showMoreInfo: false,
        }
    },
    computed: {
        shortDescription: function() {
            // you're free to do something more complex here
            // for illustration purposes, we're just trimming
            // the string down to size
            return this.description.substring(0, 90);
        }
    },
    methods: {
        moreInfo: function() {
            this.showMoreInfo = true;
        }
    }
}

不需要 jQuery，而且可读性也更高。