代码之家 › 专栏 › 技术社区 › Robert

Vuejs过滤器不起作用

vuejs2 vue.js javascript

Robert · 技术社区 · 6 年前

简单代码示例

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
  <style>
  </style>
</head>
<body>
<div id="app">
    <h1>Bitcoin Price Index</h1>
    <div v-for="currency in info">
        {{ currency.description }}
        <span v-html="currency.symbol"></span>{{ currency.rate_float || currencyToDeciaml }}
    </div>
</div>
  <script>
      const app = new Vue({
          el   : '#app',
          data : {
              info : null,
          },
          filters : {
              currencyToDeciaml(val) {console.log(`foo`);
                  return Number(val).toFixed(2);
              }
          },
          // Dom is ready so now load the data
          mounted() {
            axios.get(`https://api.coindesk.com/v1/bpi/currentprice.json`)
                .then(response => this.info = response.data.bpi);
          },
      });
  </script>
</body>
</html>

我试着用一个简单的过滤器 currencyToDeciaml 但它甚至没有被执行 foo 不显示。我好像想不出来。任何帮助都将不胜感激。

1 回复 | 直到 6 年前

RDev 6 年前

过滤器的正确语法如下:

{{ currency.rate_float | currencyToDeciaml }}

只有一根管子

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

2 年前

Park · Vuejs道具,路径较长

3 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

3 年前

roev · 大堆来自(物体)。forEach不使用vue。js

3 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

7 年前

Ready Dev · Axios一次发出多个请求(vue.js)

7 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

7 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

7 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

7 年前

Tim · VueJS-迭代从AJAX调用返回的数据

7 年前