我能'；t使用javascript和vue.js从一个范围中获取文本，只进行一次截断

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

html:

---

它不会使截短或按钮中的动作生效，我真的很感激你能帮我解决这个问题

你完全没有理解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;
        }
    }
}

{{description}}
{{shortDescription}}
更多信息。。。
导出默认值{
数据：函数（）{
返回{
描述：“这是我的长描述。”，
showMoreInfo:false，
}
},
计算：{
shortDescription:function（）{
//你可以在这里做更复杂的事情
//为了便于说明，我们只是修剪一下
//把绳子拉细到合适的尺寸
返回此.description.substring（0,90）；
}
},
方法：{
moreInfo:function（）{
this.showMoreInfo=true；
}
}
}

---

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

您完全没有理解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;
        }
    }
}

{{description}}
{{shortDescription}}
更多信息。。。
导出默认值{
数据：函数（）{
返回{
描述：“这是我的长描述。”，
showMoreInfo:false，
}
},
计算：{
shortDescription:function（）{
//你可以在这里做更复杂的事情
//为了便于说明，我们只是修剪一下
//把绳子拉细到合适的尺寸
返回此.description.substring（0,90）；
}
},
方法：{
moreInfo:function（）{
this.showMoreInfo=true；
}
}
}

不需要jQuery，也更具可读性

<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;
        }
    }
}