本節學習目標
熟練掌握textarea元件的使用
它是什麼?
textarea 多行輸入元件特性
1.placehold 設定佔位符,提醒使用者應該輸入什麼內容,或者輸入的規則,只能輸入數字等等開始吧2.disabled 設定是否支援使用者輸入,設定為true
3.autofocus進入頁面是否自動獲得焦點
4.rows 元件允許顯示的行數
5.如何將資料和變數進行繫結
6.慎用偽類,前方有坑
7.高度和行數同時設定,會怎麼樣
8.textarea事件檢測
1.設定placehold
注意 不要講placehold寫入到css樣式中去,ios 測試不起作用
2.設定使用者不能輸入內容
一般像這種使用者不能使用的情況下,要將控制項背景顏色設定成灰色系列,所以我們就借助偽類,設定一下
偽類格式:
樣式類名 +『:』 +偽類名稱注意這個元件在enabled 情況下會有些坑,繼續往下看
3.自動獲得焦點
當使用者進入這個頁面的時候,我們讓某個textarea元件獲得焦點,怎麼設定呢?見下面的**
4.rows多行顯示
ed1920e8-2ee8-4101-8c7e-d55c3e102966.png
注意
不能將rows設定在css樣式中,這樣做不會產生任何效果這裡解釋一下rows='10' 是以系統字型40px為單位的,設定行高為十行,也就是說元件的高度為10*40px
5.如何將資料和變數進行繫結
我們先定義乙個變數
export default}}
然後將變數繫結到元件上
同時又設定了高度樣式
.textarea
8.textarea事件檢測事件主要有以下幾種
接下來看如何使用
之前講過事件繫結的完整寫法是v-on:事件='定義的方法'
簡寫為@事件='定義的方法'
下面是定義的方法
本節的內容到這裡已經全部講完,這個元件的用法你掌握了嗎? weex學習之路 二 元件封裝(1)
不管是為了解耦還是為了 的復用,元件封裝都是必須要的。因為weex使用flex布局,所以每個頁面都可以抽象成 頭部 頂部導航 身體 主體內容 腳 底部 當然,並不是所有的頁面存在這3個要素,所以元件需要支援一些配置,具體 如下 flex direction column justify conten...
元件 1 元件定義
使用vue.extend options 定義元件,引數為乙個包含了被定義組選項的物件。使用vue.component id,definition 註冊定義好的元件,id為該元件名稱。definition 既可以是乙個extend 返回的例項,也可以是乙個包含元件選項的物件 將會自動呼叫extend...
012 元件註冊
元件,自定義元素。可以拓展html元素,封裝重複可用的 提高 復用率。所有的vue元件例項都是vue的例項,因此他們擁有和頁面相同的宣告週期鉤子函式 一 全域性註冊 1 編寫元件 tema.vue 全域性元件註冊 div template 2 註冊 在入口檔案main.js中 import tema...