Fatal编程技术网
  • javascript/
  • Javascript 如何以大写字母显示项目？

Javascript 如何以大写字母显示项目？

javascript vue.js vuejs2

Javascript 如何以大写字母显示项目？,javascript,vue.js,vuejs2,vue-component,vue-router,Javascript,Vue.js,Vuejs2,Vue Component,Vue Router,我试着在vue（一个待办事项列表）中创建一个简单的列表示例。在这里我试着添加大写的过滤器（换句话说，所有字母都是大写的）。但它显示了我的错误 这是我的密码 错误： 呈现函数出错：“TypeError:无法读取未定义的”的属性“大写” **vue.js:572类型错误：无法读取未定义的属性“大写” 在script.js:29 在Array.map（）处 Vue$3.5大写（script.js:28） 在Watcher.get（vue.js:2883） 在Watcher.evaluate（vue.

我试着在vue（一个待办事项列表）中创建一个简单的列表示例。在这里我试着添加大写的过滤器（换句话说，所有字母都是大写的）。但它显示了我的错误

这是我的密码

错误： 呈现函数出错：“TypeError:无法读取未定义的”的属性“大写”

**vue.js:572类型错误：无法读取未定义的属性“大写”
在script.js:29
在Array.map（）处
Vue$3.5大写（script.js:28）
在Watcher.get（vue.js:2883）
在Watcher.evaluate（vue.js:2990）
位于Proxy.computedGetter（vue.js:3265）
在Proxy.eval（在createFunction（vue.js:9818）上的eval）：2:311
Vue$3.Vue.\u渲染（Vue.js:4123）
Vue$3.updateComponent（Vue.js:2542）
在Watcher.get（vue.js:2883）**
您在
映射
中的函数应该引用
项
（其参数），而不是
此.item
，它不存在，因为函数不是作为方法调用的。

您在
映射
中的函数应该引用
项
（其参数），而不是
此.item
，它不存在，因为函数不是作为方法调用的。

您所犯的错误：

  • upperCase（）
    不是javascript函数。它应该是
    toUpperCase（）
  • 您不必使用
    this.item
    ，只需在回调函数中使用
    item
  • 由于
    item
    是一个对象，因此不能执行
    toUpperCase（）
    方法。您必须执行
    item.name.toUpperCase（）
    （这就是您正在尝试执行的操作）
将
大写
函数更改为：

upperCase: function () {
    return this.items.map(function (item) {
           return item.name.toUpperCase();
    })
}
  • 您正在从
    upperCase
    函数返回值，但试图在
    index.html
    文件中显示
    item.name
    。仅将其更改为
    项目

    <li v-for="item in upperCase" >
   {{item}}
   <button @click="deleteTodo(item)">X</button>
</li>

  • 
{{item}}
X

    •
更新了plnkr:

您所犯的错误：

  • upperCase（）
    不是javascript函数。它应该是
    toUpperCase（）
  • 您不必使用
    this.item
    ，只需在回调函数中使用
    item
  • 由于
    item
    是一个对象，因此不能执行
    toUpperCase（）
    方法。您必须执行
    item.name.toUpperCase（）
    （这就是您正在尝试执行的操作）
将
大写
函数更改为：

upperCase: function () {
    return this.items.map(function (item) {
           return item.name.toUpperCase();
    })
}
  • 您正在从
    upperCase
    函数返回值，但试图在
    index.html
    文件中显示
    item.name
    。仅将其更改为
    项目

    <li v-for="item in upperCase" >
   {{item}}
   <button @click="deleteTodo(item)">X</button>
</li>

  • 
{{item}}
X

    •
更新的plnkr:

您可以一起跳过javascript，并使用CSS使文本大写

。大写{
文本转换：大写；
}
我是大写的


我是普通大小写
您可以一起跳过javascript，使用CSS使文本大写

。大写{
文本转换：大写；
}
我是大写的


我是普通案例
对于未来可能的读者，我是专门为此而设计的，其优点是可重用，而不是为每个需要大写的列表提供计算属性

Vue.js允许您定义可用于应用公共 文本格式

模板：

<li v-for="item in items" >
    {{item.name | capitalize}}
    <button @click="deleteTodo(item)">X</button>
</li>
对于未来可能的读者，我们专门为此设计了一个列表，其优点是可重用，而不是为每个需要大写的列表都有一个计算属性

Vue.js允许您定义可用于应用公共 文本格式

模板：

<li v-for="item in items" >
    {{item.name | capitalize}}
    <button @click="deleteTodo(item)">X</button>
</li>
它向我显示错误是一个无用的问题描述，除非你也告诉我们它向你显示了什么错误。很明显，您会收到一条错误消息，而这条消息就在您面前的屏幕上。为什么不在你的问题中，这样我们也能得到这些信息呢？好吧，等等。看到了吗update@naveen检查我的回答你可以使用一个而不是一个计算属性。它向我显示错误是一个无用的问题描述，除非你也告诉我们它向你显示了什么错误。很明显，您会收到一条错误消息，而这条消息就在您面前的屏幕上。为什么不在你的问题中，这样我们也能得到这些信息呢？好吧，等等。看到了吗update@naveen检查我的回答你可以使用一个而不是一个计算属性。您是否可以共享Plunks您是否可以共享Plunks什么是4点？您正在从大写函数返回值，但试图在index.html文件中显示item.name。将其更改为仅项。
大写
函数仅返回不带键的对象。在您的
index.html
文件中，您正在访问
item.name
，因此我必须将其更改为仅
item
，以查看值item.name进行访问，请使用
from
upperCase
。4点是什么？您正在从大写函数返回值，但尝试在index.html文件中显示item.name。将其更改为仅项。
大写
函数仅返回不带键的对象。在您的
index.html
文件中，您正在访问
item.name
，因此我必须将其更改为仅
item
，以查看值项的形式使用键访问，请使用
大写的
中的code>。name
。