如何使用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="{'1920px',height:'800px'}"></div>
				</el-col>
			</el-tab-pane>
			<el-tab-pane label="柱状图" name="column2D">
				<el-col :span="12">
					<div id="column2D" :style="{'1920px',height:'800px'}"></div>
				</el-col>
			</el-tab-pane>
			<el-tab-pane label="过滤器" name="filter">
				<el-col :span="12">
					<div id="filterData" :style="{'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、实现效果

原文地址:https://www.cnblogs.com/hzcya1995/p/13313700.html