uni-app基础

uni-app基础

01 基本语法

数据的展示

定义：在data定义

使用：在tempelate中插值{ { }}使用，不需要使用this

注意点：在属性中不需要括号，属性名前需要加‘：’，这一点区别于微信小程序。

数据循环

微信小程序中的用法

wx:for="{ {数据源}}" wx:for-index=“index的别名” wx:for-item=“item的别名”

vue中的用法

vue-for=“item in 数据源” 或者 vue-for="（item，index） in 数据源"

<view v-for="(item) in list" :key="item.id">
  {
   {
   item.name}} --- {
   {
   item.id}}
</view>

// 数组
list: [
  {
   id:0,name:'张三'},
  {
   id:1,name:'李四'},
  {
   id:2,name:'王五'},
]

条件编译

v-if：操作DOM，需要重新编译，所以不适合频繁切换
v-show：只操作样式，不管显不显示，都会存在这个元素

计算属性

类似于计算数据的处理接口，减少在模板中对数据的复杂逻辑操作，比如数据过滤，去除不要渲染的某个或某些数据

// 使用计算属性
<view>
  <view v-for="item in filterList" :key="item.id">
    {
   {
   item.name}}
  </view>
</view>
// 计算属性节点
computed:{
   
money(){
   

return "$" + this.num

},

filterL