vue.js 2：如何使数据小写

发布于04月26日

我想把一些数据改成小写(alway lowercase)

我会像这样做和搜索输入:

<template id="search">
    <div>
        <input type="text" v-model="search">
        <li v-show="'hello'.includes(search) && search !== ''">Hello</li>
    </div>
</template>

Vuejs :(组成部分)

Vue.component('search', {
    template : '#search',
    data: function(){return{
        search : '',
    }}
});

我试了watch，但我不想输入时显示小写

watch: {
    'search' : function(v) {
        this.search = v.toLowerCase().trim();
    }
}

Demo : https://jsfiddle.net/rgr2vnjp/

我不想在搜索列表v-show中添加.toLowerCase()，比如:

<li v-show="'hello'.includes(search.toLowerCase()) && search !== ''">Hello</li>

Any trick?，我在Vuejs 2上搜索，很多人告诉我只使用filter个出口，而不是出口

Playground : https://jsfiddle.net/zufo5mhq/(try 键入H)

PS: Good / better code I would like to know also, Thanks

Vue.js相关问答推荐

使用nuxt I18N验证规则消息翻译

我需要在 nuxt2 上使用 /index 作为 url 的一部分

使用项目和字段，列跨度为 2 的 Bootstrap-vue 表

Nuxt3-Vue中的useRoute和useRouter有什么区别

在 Ajax 函数中访问 Vue.js 组件属性

Vuetify grid layout - 如何填充网格中元素的高度

如何将 vuejs 项目部署到 heroku

在 Vue 项目之间共享assets和组件

如何使用 vuex 删除项目？

Nuxt：显示静态文件夹中的本map像

为什么 vue 文档说 refs 不是响应式的，而实际上它们是响应式的

取消选中单选按钮

如何确定 Vue 何时完成更新 DOM？

从 ajax 调用填充 Vue.js 中的下拉列表

Vue.js 的 $emit 和 $dispatch 有什么区别？

是否有 v-cloak 逆？

Vue js在列表中添加动态字段，删除和排序不起作用

TypeError： Object(...) 不是 Vue 中的函数

为什么 router.currentRoute.path 没有react？

Vue - 重用方法的最佳方式

实用课程推荐

推荐答案

Vue.js相关问答推荐