使用Vue.js中的過濾器實現(xiàn)冪方求值的方法
更新時間：2019年08月27日 09:27:14 作者：翱翔天地
這篇文章主要介紹了使用Vue.js中的過濾器實現(xiàn)冪方求值的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
1、應(yīng)用場景
使用ElementUI實現(xiàn)一個輸入框，輸入100，下方顯示10000。
2、實現(xiàn)源碼
（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、實現(xiàn)效果
總結(jié)
以上所述是小編給大家介紹的使用Vue.js中的過濾器實現(xiàn)冪方求值,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了vue中使用echarts的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要介紹了vue之封裝多個組件調(diào)用同一接口的案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了vue基于better-scroll仿京東分類列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
Vue富文本的實現(xiàn)可以使用一些現(xiàn)成的第三方庫,如Quill、Vue-quill-editor、wangEditor等,這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)富文本編輯器的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue2中使用less簡易教程，由于不需要手動配置webpack，所以vue中使用less是非常簡單的，只需要安裝less，less-loadder就ok了2018-03-03
淺談Vue網(wǎng)絡(luò)請求之interceptors實際應(yīng)用
這篇文章主要介紹了淺談Vue網(wǎng)絡(luò)請求之interceptors實際應(yīng)用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue組件中prop屬性使用說明,非常不錯具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
vue?結(jié)合webpack的初級使用指南小白學(xué)習(xí)篇
這篇文章主要為大家介紹了vue?結(jié)合webpack的初級使用指南非常適合入門webpack的小白學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了vue 子組件和父組件傳值的示例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了Antd的table組件表格的序號自增操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10