使用Vue.js中的過濾器實(shí)現(xiàn)冪方求值的方法
更新時(shí)間：2019年08月27日 09:27:14 作者：翱翔天地
這篇文章主要介紹了使用Vue.js中的過濾器實(shí)現(xiàn)冪方求值的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
1、應(yīng)用場景
使用ElementUI實(shí)現(xiàn)一個(gè)輸入框，輸入100，下方顯示10000。
2、實(shí)現(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、實(shí)現(xiàn)效果
總結(jié)
以上所述是小編給大家介紹的使用Vue.js中的過濾器實(shí)現(xiàn)冪方求值,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
今天小編就為大家分享一篇vue 中固定導(dǎo)航欄的實(shí)例代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
moment是一款多語言支持的日期處理類庫, 在vue中如何使用呢?這篇文章主要給大家介紹了關(guān)于vue之moment使用的相關(guān)資料,需要的朋友可以參考下2021-05-05
vue2.0開發(fā)實(shí)踐總結(jié)之入門篇
這篇文章主要為大家總結(jié)了vue2.0開發(fā)實(shí)踐之入門,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了Vue作用域插槽slot-scope實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了如何使用vue自定義指令構(gòu)建拖放插件，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了vue中template的三種寫法示例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
下面小編就為大家分享一篇vue刷新和tab切換實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue之Dep和Observer的用法及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue實(shí)現(xiàn)nav導(dǎo)航欄的方法
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目nav導(dǎo)航欄的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
Vuejs學(xué)習(xí)筆記之使用指令v-model完成表單的數(shù)據(jù)雙向綁定
表單類控件承載了一個(gè)網(wǎng)頁數(shù)據(jù)的錄入與交互，本章將介紹如何使用指令v-model完成表單的數(shù)據(jù)雙向綁定功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值。感興趣的朋友跟隨小編一起看看吧2019-04-04