コラムの目標
このコラムでは、vue と要素 UI の共同テクノロジー スタックの制御の下で、柔軟な使用のための効果的なソース コードの例と情報ポイントの紹介を提供します。
(1) vue2 のいくつかの基本操作を提供します: インストール、参照、テンプレートの使用、計算、監視、ライフサイクル (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed、activated、deactivated、errorCaptured、components、)、 $root、$parent、$children、$slots、$refs、props、$emit、eventbus、provide / inject、Vue.observable、$listeners、$attrs、$nextTick、v-for、v-if、v-else 、v-else-if、v-on、v-pre、v-cloak、v-once、v-model、v-html、v-text、キープアライブ、スロット スコープ、フィルター、v-bind、。 stop、.native、ディレクティブ、mixin、レンダリング、国際化、Vue Router など。
(2) -cascader、el-input-number、el-switch、el-slider、el-time-picker、el-date-picker、el-upload、el-rate、el-color-picker、el-transfer、 el-form、el-table、el-tree、el-pagination、el-badge、el-avatar、el-skeleton、el-empty、el-descriptions、el-result、el-statistic、el-alert、v-ロード中、$ message、$alert、$prompt、$confirm、$notify、el-breadcrumb、el-page-header、el-tabs、el-dropdown、el-steps、el-dialog、el-tooltip、el-popover 、el-popconfirm、el-card、el-carousel、el-collapse、el-timeline、el-divider、el-calendar、el-image、el-backtop、v-infinite-scroll、el-drawerなど
アプリケーションシナリオ
vue プロジェクトの開発では、米ドル、ポンド、人民元などの通貨表現を使用します。ここでは、さまざまな通貨形式を簡単に表現できるプラグインを引用します。値を入力すると、対応する通貨単位、千の位の区切り記号、および小数点の区切り記号が表示されます。
効果例
サンプルソースコード（全70行）
/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [email protected]
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2022-09-25
*/
<template>
<div class="container">
<div class="top">
<h3>数字货币化快速显示</h3>
<div class="author">大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
</div>
<p><vue-numeric currency="$" separator="," v-model="price" :allow-clear='true'></vue-numeric></p>
<p><vue-numeric currency="￥" v-model="price" :allow-clear='true'></vue-numeric></p>
<p><vue-numeric currency="￡" separator="," v-model="price" :allow-clear='true'></vue-numeric></p>
<p><vue-numeric currency="元" v-model="price" :allow-clear='true' currency-symbol-position='suffix'></vue-numeric></p>
</div>
</template>
<script>
import VueNumeric from 'vue-numeric'
export default {
data() {
return {
price:'100',
}
},
components: {
VueNumeric
},
methods: {
},
}
</script>
<style scoped>
.container {
width: 1000px;
height: 580px;
margin: 50px auto;
border: 1px solid green;
position: relative;
}
.top {
margin: 0 auto 130px;
padding: 10px 0;
background: darkcyan;
color: #fff;
}
input{
width: 400px; height: 40px; line-height: 40px; font-size:16px; border-radius:20px; padding:0 20px; }
</style>
依存関係をインストールする
cnpm install --save vue-numeric
API
https://github.com/kevinongko/vue-numeric