style:
The difference between the two icons:
The first icon is a picture file displayed directly in the folder static
Foreground code display:
<image class="logo" src="/static/logo.png"></image>
The second icon is a reference made from the server side
Settings made in data in script
search: getApp().globalData.icon + 'index/search.png',
Front display:
<img class="search" :src="search" alt="search">
Ordinary variable references:
Set variables in script
title: 'Hello',
Front display
<text class="title">{ {title}}</text>
How does the console output the data in data
This example is written in the method onLoad()
onLoad() {
console.log(this.title)
},
Full code:
<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>