使用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 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
ECMAscript 变量作用域总结概括
Aug 18 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
Javascript地址引用代码实例解析
Feb 25 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与MySQL交互使用详解
2006/10/09 PHP
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Python编程实现删除VC临时文件及Debug目录的方法
2017/03/22 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
python elasticsearch环境搭建详解
2019/09/02 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Python函数基本使用原理详解
2020/03/19 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
西门豹教学反思
2014/02/04 职场文书
保护环境倡议书300字
2014/05/19 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
大学生自荐信范文
2015/03/05 职场文书
创业计划书之家政服务
2019/09/18 职场文书
Golang gRPC HTTP协议转换示例
2022/06/16 Golang