2. Vue指令

指令:v-xxx
用于動態(tài)操作某些數(shù)據(jù)

v-bind:

image.png

v-html:

image.png

v-if: // v-else:條件渲染(不需要頻繁切換且安全性較高的界面)

image.png

v-show:條件渲染(需要循環(huán)渲染及權(quán)限或安全性不需要很高的界面)

image.png

v-for:循環(huán)迭代顯示

image.png

image.png

對于對象

image.png

image.png

image.png

image.png

對于迭代(循環(huán)輸出)

image.png

image.png

v-cloak:配合style使用:解決預(yù)加載顯示問題

image.png

v-model:數(shù)據(jù)雙向綁定
例一:點擊單選按鈕打印出對應(yīng)需要輸出的內(nèi)容

<body>
<div id="app">
  <!-- v-model直接實現(xiàn)了雙向綁定 -->
  <label><input type="radio" v-model="gender" value="M">男</label>
  <label><input type="radio" v-model="gender" value="F">女</label>
  <label><input type="radio" v-model="gender" value="U">人妖</label>
  {{gender}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<script>
const vm = new Vue({
  el: '#app',
  data: {
    gender: ''
  }
})
</script>
</body>

例二:選擇復(fù)選框打印出選中所有選項所需輸出內(nèi)容

<body>
<div id="app">
  <!-- v-model直接實現(xiàn)了雙向綁定 -->
  <label><input type="checkbox" v-model="hobby" value="M">男</label>
  <label><input type="checkbox" v-model="hobby" value="F">女</label>
  <label><input type="checkbox" v-model="hobby" value="U">人妖</label>
  {{hobby}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<script>
const vm = new Vue({
  el: '#app',
  data: {
    // 篩選框的數(shù)據(jù)格式應(yīng)該是一個數(shù)組
    hobby: []
  }
})
</script>
</body>

例三:關(guān)于v-model修飾符

<body>
<div id="app">
  <!-- model的lazy修飾符,在input的時候不會更新捆毫,只有在change的時候才會更新 -->
  <input
    type="text"
    v-model.lazy="inputValue"
  >
  {{inputValue}}

  <!-- number修飾符晒衩,會嘗試去把輸入轉(zhuǎn)化為數(shù)字寄猩, 如果 轉(zhuǎn)換失敗巩剖,保留原值, 這個檢驗不靠譜,所以我們還是不要相信用戶的輸入 -->
  <!-- 當(dāng)輸入值第一個字符或默認(rèn)值為數(shù)字時林说,才會驗證其后面輸入是否為數(shù)字 -->
  <input
    v-model.number="age"
  >
  age: {{age}}

  <!-- 自動過濾用戶輸入的首尾空白字符 -->
  <input
    v-model.trim="test"
  >
  trim: {{test}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<script>
const vm = new Vue({
  el: '#app',
  data: {
    inputValue: '',
    age: 12,
    test: ''
  }
})
</script>
</body>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末恕出,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子嵌施,更是在濱河造成了極大的恐慌饲化,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,946評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件吗伤,死亡現(xiàn)場離奇詭異吃靠,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)足淆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評論 3 399
  • 文/潘曉璐 我一進(jìn)店門巢块,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人巧号,你說我怎么就攤上這事族奢。” “怎么了丹鸿?”我有些...
    開封第一講書人閱讀 169,716評論 0 364
  • 文/不壞的土叔 我叫張陵越走,是天一觀的道長。 經(jīng)常有香客問我卜高,道長弥姻,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,222評論 1 300
  • 正文 為了忘掉前任掺涛,我火速辦了婚禮庭敦,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘薪缆。我一直安慰自己秧廉,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,223評論 6 398
  • 文/花漫 我一把揭開白布拣帽。 她就那樣靜靜地躺著疼电,像睡著了一般。 火紅的嫁衣襯著肌膚如雪减拭。 梳的紋絲不亂的頭發(fā)上蔽豺,一...
    開封第一講書人閱讀 52,807評論 1 314
  • 那天,我揣著相機(jī)與錄音拧粪,去河邊找鬼修陡。 笑死沧侥,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的魄鸦。 我是一名探鬼主播宴杀,決...
    沈念sama閱讀 41,235評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼拾因!你這毒婦竟也來了旺罢?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,189評論 0 277
  • 序言:老撾萬榮一對情侶失蹤绢记,失蹤者是張志新(化名)和其女友劉穎扁达,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體庭惜,經(jīng)...
    沈念sama閱讀 46,712評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡罩驻,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,775評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了护赊。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,926評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡砾跃,死狀恐怖骏啰,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情抽高,我是刑警寧澤判耕,帶...
    沈念sama閱讀 36,580評論 5 351
  • 正文 年R本政府宣布撕予,位于F島的核電站唱遭,受9級特大地震影響鲤妥,放射性物質(zhì)發(fā)生泄漏构蹬。R本人自食惡果不足惜六水,卻給世界環(huán)境...
    茶點故事閱讀 42,259評論 3 336
  • 文/蒙蒙 一种远、第九天 我趴在偏房一處隱蔽的房頂上張望轰绵。 院中可真熱鬧莹桅,春花似錦昌执、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至铐达,卻和暖如春岖赋,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背瓮孙。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評論 1 274
  • 我被黑心中介騙來泰國打工唐断, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留选脊,地道東北人。 一個月前我還...
    沈念sama閱讀 49,368評論 3 379
  • 正文 我出身青樓栗涂,卻偏偏與公主長得像知牌,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子斤程,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,930評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 關(guān)于愛情的故事角寸,經(jīng)歷的很少,看過的很多忿墅。每個人的愛情都有不同的模樣扁藕,有人甜蜜的讓人羨慕,有人難過的讓人心疼疚脐,有人平...
    非遠(yuǎn)閱讀 542評論 0 0
  • 文/花伊格 寧靜的夜空 滿載希望的星 皎潔的月 散發(fā)著孤寂 烏云隱去了月 黑夜變得更黑 鳥兒停止了歌唱 黑夜變得更...
    花伊格閱讀 451評論 4 14
  • 今天下雨亿柑,有時我喜歡的天氣。放學(xué)接了娃娃就商量著散著步子回家棍弄,但是看看手表已經(jīng)是下午六點半了望薄,反復(fù)斟酌,決定放下理...
    冰雪原野閱讀 199評論 0 1
  • 1.android studio安裝 1.安裝jdk1.8 2.安裝AS 3.配置SDK和JDK .gradle目...
    RG的日常閱讀 776評論 0 0