基础语法
知识点
- 数据绑定
- 条件判断
- 列表渲染
数据绑定
插值
数据绑定常见形式之一：文本插值
里的内容将会被替代为对应数据对象上 message 的值。绑定的数据对象上 message 发生了改变，插值处的内容会实时进行同步的更新。
<template>
<view class="content">
<view>数据绑定常见形式之一：{{ message }}</view>
</view>
</template>
<script>
export default {
data() {
return {
message: '文本插值'
}
}
}
</script>
<style>
.content {
font-size: 48rpx;
margin-top: 28rpx;
text-align: center;
}
</style>
pages.json 文件中进行设置文件路径，并且可以设置表头的背景颜色和文字颜色：
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"navigationStyle": "custom"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
指令
含义：带有 v- 前缀的特殊属性。
作用：当表达式的值改变时，DOM 会响应式地进行改变。
在pages.json 文件中进行设置文件路径:
{
"path": "pages/index/introduceP",
"style": {
"navigationBarTitleText": "v-指令"
}
}
常用指令 1：v-bind
作用：
- 动态地绑定一个或多个属性
- 一个组件 prop 到表达式。
缩写形式：
<!-- v-bind 是完整写法 -->
<image class="logo" v-bind:src="imgUrl"></image>
<!-- : 是缩写的形式 -->
<image class="logo" :src="imgUrl"></image>
常用指令 2：v-on
作用：
- 监听 DOM 事件
<!-- v-on 是完整写法 -->
<button class="button" v-on:tap="doSomething">v-on 是完整写法</button>
<!-- @ 是缩写的形式 -->
<button class="button" @tap="doSomething">@ 是缩写的形式</button>
常用指令 3：v-html
作用：
- 更新元素的 innerHTML
注意：
- 其他端不支持此属性，除了 App 端和 H5 端支持。
<view v-html="htmlText"></view>
data() {
return {
imgUrl: '/static/logo.png',
htmlText:'<div style="background-color: #2B9939;"><div >我是html</div>'
}
},
条件判断
在pages.json 文件中进行设置文件路径:
{
"path": "pages/index/condition",
"style": {
"navigationBarTitleText": "条件判断"
}
}
v-if 和 v-else
v-if 指令作用： - 条件性地渲染一块内容，当值为 *true* 的时候被渲染。 - 使用 *v-else* 指令来表示 v-if 的 *else 块*。 v-if 指令原理： - 销毁或者重建条件块内的事件监听器和子组件 v-if 指令使用场景： - 切换开销高，适合在运行时条件很少改变的情况下使用 v-if 指令使用注意： - 不推荐同时使用 v-if 和 v-for，因为v-for 具有比 v-if 更高的优先级。 ``` html语法：
(value, name, index) in object
- value：被迭代的对象元素的属性值
- name：键名
- index：索引/下标
简单的案例如下：
<!-- 对象 -->
<view v-for="(value, name, index) in object">
信息{{ index }}：{{ name }} = {{ value }}
</view>
object:{
name: 'HLS',
age: 18,
profession: '前端开发工程师'
}
手机效果展示：
