zoukankan      html  css  js  c++  java
  • 如何使用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、实现效果

  • 相关阅读:
    实例之内存体系结构(1)--- 共享池(Share pool)
    体系结构 --- 实例和数据库
    分页查询与TOP-N特性
    MERGE 和 WITH语法
    外部表
    SQL语句(9)--- 同义词
    SQL语句(8)--- 索引
    SQL语句(7)--- 视图
    SQL语句(6)--- 约束
    死锁的产生与解决
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13313700.html
Copyright © 2011-2022 走看看