小程式的資料繫結

2022-03-18 19:43:40 字數 966 閱讀 5395

小程式的頁面是資料的繫結,在頁面js檔案中的data中定義的資料,可以在wxml中利用}符號引用

// pages/test/test.js

page(,,],

tank:,

color:"blue"

},})

頁面的.wxml檔案和html性質一樣

1頁面引用js的資料是用},也可以用作屬性值

ttt }  // view標籤類似div標籤

my age }

2 如果都是字串,},就是拼接} 

3 如果乙個是字串乙個是數字也是拼接}}

4 就想做加法運算就分開寫

} + }

5 在頁面中如果屬性想表達布林值,一定要加},當然也可以直接使用變數}

11}}">

sean is sb  

6 迴圈預設是用index -> 取鍵,item -> 取值,

用wx:for-index --> 來修改取鍵的index

用wx:for-item --> 來修改取值的item

一般都要加上wx:key ="index"來提高遍歷的速度

如果只想輸出內容沒不想要包裹的標籤,用標籤做承載標籤

} ****} %%%%}

} :}  ->}

} :}  ->}

小程式的wxss檔案

標籤那個和原生的html一樣都有class和id,我們的樣式寫在wxss檔案,和普通的css沒有區別,只是用rpx來代替px。(1rpx = 0.5px)

.wxml檔案

#行內樣式寫法與原生的沒有區別,可以呼叫變數來做屬性值

asdas

.wxss檔案

.cls

小程式的資料繫結

我們知道,小程式中wxml的動態資料都是繫結在page的data裡面的,資料繫結使用 mustache 語法 雙大括號 將變數包起來,可以作用於 page 登入介面測試 登入 清除登入會話 假如我們需要條件來判斷是否要顯示,這個時候就要用到條件渲染 在框架中,我們用wx if 來判斷是否需要渲染該 ...

2 小程式 資料繫結

初始化資料 1.頁面.js的 data 選項中 index.js 檔案中 展示 pages index index.js page 生命週期函式 監聽頁面載入 onload function options 看修改是否在其他函式中是否也是同步的settimeout console.log this....

微信小程式 雙向資料繫結

舉個例子class weui cell weui cell input class weui cell hd class weui label space ensp 接 待 人text view view class weui cell bd class weui input name manage...