Vue は ID を変換するメソッドを実装します。 1. Vue コンポーネント コードを「{{name}}import {AjaxByAll} from '...'; 2. 受信ユーザー ID を介してバックグラウンド インターフェイスを呼び出し、それを表示用の名前に変換します。 </p></blockquote> <p>このチュートリアルの動作環境: Windows 10 システム、Vue バージョン 3、Dell G3 コンピューター。 <img src="https://img.php.cn/upload/article/202301/05/2023010515533370693.jpg" alt="VueでIDを変換する方法" ></p> <p>vue はどのように ID を変換しますか?</p> <p><strong></strong> vue コンポーネントを上手に使って担当者 ID と名前を変換する</p> <p><strong>開発時、バックグラウンドには作成者、変更者などの 1 つのユーザー ID のみが保存されることがよくありますが、フロントに表示する場合は、IDをその人の名前に変換して表示する必要があります </strong></p> 通常、このIDからバックグラウンドで人の名前を知ることができますが、多くの場合、このように変換します。バックグラウンド処理は非常に面倒です。もっと汎用的で簡単な方法はありますか? はい! <p></p>はい、Vue コンポーネントを検討し、ユーザー ID を渡すと、コンポーネントが人の名前を返します。なので、今後バックグラウンドで変換する必要はありません。また、このコンポーネントはページ コードのどこでも使用できるので、さらに便利です! <p></p>Vue コンポーネントのコードは次のとおりです: <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><template> <div class="mc-user-info"> {{name}} </div> </template> <script> import {AjaxByAll} from '../../api/api' export default { data() { return { name: null, id:this.userId } }, methods: { getUserName() { // alert(this.userId); //通过用户id查找用户名称 AjaxByAll('get', '/rest/common/getData/sysOrgUserApiService?userId='+this.id, null).then(data => { if (data.code === 200) { this.name=data.data } }); } }, watch: { }, mounted: function () { console.log(this.id); this.getUserName(); }, props: { userId: String, required: true } } ログイン後にコピー前述したように、Vue コンポーネントは受信ユーザー ID を介してバックグラウンド インターフェイスを呼び出し、それを名前表示に変換します。 コンポーネントは次のように使用されます: ログイン後にコピー この時点で、開発人事IDを名前に変換するコンポーネントが完成しました! 拡張思考: 上記コンポーネントは、人事IDを名前に変換する機能を実装しています。名前は変わりませんが、人事名刺や人事アバターなどの基本的なコンポーネント機能を引き続き実装するには、発散的思考を使用する必要があります。このようにして、これらのコンポーネントはどこでも使用できます。 現時点では機能に問題はなく、ページは正常に表示されていますが、ページを読み込む際に、担当者IDを名前に変換するインターフェースがおかしいことが分かりました。 ただし、私はフロントエンドの専門家ではないので、まだ解決策が見つかりません。解決方法をご存知の場合は、メッセージを残してください。ありがとうございます推奨学習:「vue ビデオ チュートリアル」
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
