使用Vue.js中的過濾器實現冪方求值的方法

2019-11-19 10:57:31

字體：大中小

來源：轉載

供稿：網友

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、實現效果