使用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 相关文章推荐
Javascript 生成指定范围数值随机数
Jan 09 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 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 伪造本地文件包含漏洞的代码
2011/11/03 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
PHP常用数组函数介绍
2014/07/28 PHP
JS的replace方法详细介绍
2012/11/09 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
Bootstrap 模态框实例插件案例分析
2016/12/28 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
详解Python3中yield生成器的用法
2015/08/20 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
python os.path模块常用方法实例详解
2018/09/16 Python
python感知机实现代码
2019/01/18 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
python安装scipy的步骤解析
2019/09/28 Python
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
Python使用openpyxl复制整张sheet
2021/03/24 Python
简历中求职的个人自我评价
2013/12/03 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
党员批评与自我批评
2014/10/15 职场文书
起诉书范文
2015/05/20 职场文书
幽默导游词开场白
2015/05/29 职场文书
《月光曲》教学反思
2016/02/16 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书