スタイル:
2 つのアイコンの違いは次のとおりです。
最初のアイコンは、静的フォルダーに直接表示される画像ファイルです。
フォアグラウンド コードの表示:
<image class="logo" src="/static/logo.png"></image>
2 番目のアイコンはサーバー側からの参照です。
スクリプト内のデータでの設定
検索: getApp().globalData.icon + 'index/search.png',
前面ディスプレイ:
<img class="検索" :src="検索" alt="検索">
通常の変数参照:
スクリプトに変数を設定する
タイトル:「こんにちは」
前面ディスプレイ
<text class="title">{ {title}}</text>
コンソールはデータをどのように出力しますか
この例は onLoad() メソッドで記述されています
onLoad() { console.log(this.title) },
完全なコード:
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<img class="search" :src="search" alt="search">
<text class="title">{
{title}}</text>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
search: getApp().globalData.icon + 'index/search.png',
}
},
onLoad() {
console.log(this.title)
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>