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


Posted in Javascript onAugust 27, 2019

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中的过滤器实现幂方求值的方法

总结

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

Javascript 相关文章推荐
js的event详解。
Sep 06 Javascript
prototype.js的Ajax对象
Sep 23 Javascript
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
JSONP原理及简单实现
Jun 08 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 #Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 #jQuery
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 #Javascript
javascript实现抢购倒计时程序
Aug 26 #Javascript
VUE路由动态加载实例代码讲解
Aug 26 #Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 #Javascript
vue-router路由模式详解(小结)
Aug 26 #Javascript
You might like
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
javascript之AJAX框架使用说明
2010/04/24 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
详解JavaScript中的六种错误类型
2017/09/21 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python实现简单截取中文字符串的方法
2015/06/15 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
python距离测量的方法
2018/03/06 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
python实现飞行棋游戏
2020/02/05 Python
python3+selenium获取页面加载的所有静态资源文件链接操作
2020/05/04 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
超市业务员岗位职责
2013/12/05 职场文书
学校安全责任书范本
2014/07/23 职场文书
禁毒主题班会教案
2015/08/14 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python