本節學習目標
熟練掌握textarea組件的使用
它是什么？
textarea 多行輸入組件
特性
1.placehold 設置占位符,提醒用戶應該輸入什么內容,或者輸入的規則,只能輸入數字等等
2.disabled 設置是否支持用戶輸入,設置為true
3.autofocus進入頁面是否自動獲得焦點
4.rows 組件允許顯示的行數
5.如何將數據和變量進行綁定
6.慎用偽類,前方有坑
7.高度和行數同時設置,會怎么樣
8.textarea事件檢測
開始吧
1.設置placehold
<textarea placeholder="請輸入您的姓名"></textarea>
注意 不要講placehold寫入到css樣式中去,iOS 測試不起作用
2.設置用戶不能輸入內容
<textarea disabled="true" placeholder="請輸入您的姓名"></textarea>
一般像這種用戶不能使用的情況下,要將控件背景顏色設置成灰色系列,所以我們就借助偽類,設置一下
.textarea:disabled{
background-color: lightgray;
}
偽類格式：
樣式類名 +‘:’ +偽類名稱
注意這個組件在enabled 情況下會有些坑,繼續往下看
3.自動獲得焦點
當用戶進入這個頁面的時候,我們讓某個textarea組件獲得焦點,怎么設置呢？見下面的代碼
<textarea autofocus="true></textarea>
4.rows多行顯示
<textarea rows='10'></textarea>
注意
不能將rows設置在css樣式中,這樣做不會產生任何效果
這里解釋一下rows='10' 是以系統字體40px為單位的,設置行高為十行,也就是說組件的高度為10*40px
5.如何將數據和變量進行綁定
我們先定義一個變量
export default{
data(){
return{
value:''
}
}
}
然后將變量綁定到組件上
<textarea v-model='value'><textarea>
解釋一下
這個就是MVVM架構中的最常用的雙向綁定,,雙向綁定就是說,如果textarea 輸入的值改變了,那么value的值也會隨著改變,如果我們設置value的值,組件顯示的值也會自動改變
6.慎用偽類,前方有坑
偽類的使用上面提過了,接下來我們看看還有那些偽類可以使用
// 輸入激活
.textarea:active{
background-color: cornflowerblue;
}
// 組件不支持輸入
.textarea:disabled{
background-color: lightgray;
}
// 組件獲得焦點
.textarea:focus{
background-color: green;
}
// 組件可用
.textarea:enabled{
background-color: paleturquoise;
}
大坑
當你設置了偽類的時候,在輸入框中輸入內容,你會發現placehold仍然在,消失不了,所以請謹慎使用
7.高度和行數同時設置,會怎么樣
如果你設置了rows
<textarea rows='10' placeholder="請輸入您的姓名"> </textarea>
同時又設置了高度樣式
.textarea{
background-color: paleturquoise;
font-size: 32px;
height:400px;
}
8.textarea事件檢測
事件主要有以下幾種
- focus獲得焦點
- blur失去焦點
- input/change輸入值改變
接下來看如何使用
<textarea class="textarea" v-model='value' disabled="false" autofocus="true" @input="input" @focus="focus" @blur="blur" rows='10' placeholder="請輸入您的姓名"></textarea>
之前講過事件綁定的完整寫法是v-on:事件='定義的方法'簡寫為@事件='定義的方法'
下面是定義的方法
<script>
export default{
methods:{
input(e){
},
focus(e){
},
blur(e){
}
}
}
</script>
本節的內容到這里已經全部講完,這個組件的用法你掌握了嗎？
