使用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 相关文章推荐
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
Jan 25 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
Vue触发input选取文件点击事件操作
Aug 07 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
解析PHP缓存函数的使用说明
2013/05/10 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
vue-iview动态新增和删除的方法
2020/06/17 Javascript
Python pymongo模块常用操作分析
2018/09/01 Python
Python实现分段线性插值
2018/12/17 Python
python itchat实现调用微信接口的第三方模块方法
2019/06/11 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
pytorch 求网络模型参数实例
2019/12/30 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
Delphi笔试题
2016/11/14 面试题
办公室前台岗位职责
2014/01/04 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
工程承包协议书
2014/04/22 职场文书
田径运动会通讯稿
2015/07/18 职场文书
Python经常使用的一些内置函数
2022/04/11 Python