如何在Vue.js中使用過(guò)濾器實(shí)現(xiàn)冪方求值

本篇文章為大家展示了如何在Vue.js中使用過(guò)濾器實(shí)現(xiàn)冪方求值，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

1、應(yīng)用場(chǎng)景

      使用ElementUI實(shí)現(xiàn)一個(gè)輸入框，輸入100，下方顯示10000。

2、實(shí)現(xiàn)源碼

（1）主頁(yè)面

<template>
 <el-row>
 <el-tabs v-model="activeName" @tab-click="handlerClick">
  <el-tab-pane label="餅圖" name="pie2D">
  <el-date-picker
   v-model="value2"
   type="month"
   placeholder="選擇月">
  </el-date-picker>
  <el-col :span="12">
   <div id="epie2D" :></div>
  </el-col>
  </el-tab-pane>
  <el-tab-pane label="柱狀圖" name="column2D">
  <el-col :span="12">
   <div id="column2D" :></div>
  </el-col>
  </el-tab-pane>
  <el-tab-pane label="過(guò)濾器" name="filter">
  <el-col :span="12">
   <div id="filterData" :>
   <el-input v-model="oldData"></el-input>
   <label>{{oldData | Power}}</label>
   </div>
  </el-col>
  </el-tab-pane>
 </el-tabs>
 </el-row>
</template>

（2）JavaScript

<script>
 export default {
 name: 'Epie2D',
 data() {
  return {
  oldData:''
  }
 },
 filters: {
  Power: function(value) {
  return value * value;
  }
 }
 }
</script>

上述內(nèi)容就是如何在Vue.js中使用過(guò)濾器實(shí)現(xiàn)冪方求值，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。