使用Vue.js中的过滤器实现幂方求值的方法

1、应用场景

      使用ElementUI实现一个输入框，输入100，下方显示10000。

2、实现源码

（1）主页面

<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\" :style=\"{width:\'1920px\',height:\'800px\'}\"></div>
  </el-col>
  </el-tab-pane>
  <el-tab-pane label=\"柱状图\" name=\"column2D\">
  <el-col :span=\"12\">
   <div id=\"column2D\" :style=\"{width:\'1920px\',height:\'800px\'}\"></div>
  </el-col>
  </el-tab-pane>
  <el-tab-pane label=\"过滤器\" name=\"filter\">
  <el-col :span=\"12\">
   <div id=\"filterData\" :style=\"{width:\'1900px\',height:\'800px\'}\">
   <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>

3、实现效果

以上所述是小编给大家介绍的使用Vue.js中的过滤器实现幂方求值,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！