[TOC]
#### v-if
在 Vue.js,我們使用 v-if 指令實現同樣的功能:
<h1 v-if="true">Yes</h1>
也可以用 v-else 添加一個 “else” 塊:
<h1 v-if="true">Yes</h1>
<h1 v-else>No</h1>
#### v-else-if:
<input type="text" v-model="age">
<span v-if="age<20">小孩</span>
<span v-else-if="age<30">青年</span>
<span v-else-if="age<50">壯年</span>
<span v-else>老年</span>
#### v-show:
另一個根據條件展示元素的選項是 v-show 指令。用法大體上一樣:
<h1 v-show="true">Hello!</h1>
#### v-if vs. v-show
在切換 v-if 塊時,Vue.js 有一個局部編譯/卸載過程,因為 v-if 之中的模板也可能包括數據綁定或子組件。v-if 是真實的條件渲染,因為它會確保條件塊在切換當中合適地銷毀與重建條件塊內的事件監聽器和子組件。
v-if 也是惰性的:如果在初始渲染時條件為假,則什么也不做——在條件第一次變為真時才開始局部編譯(編譯會被緩存起來)。
相比之下,v-show 簡單得多——元素始終被編譯并保留,只是簡單地基于 CSS 切換。
一般來說,v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此,如果需要頻繁切換 v-show 較好,如果在運行時條件不大可能改變 v-if 較好。
#### 使用key唯一令牌解決表單值混亂問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
<script src="node_modules/axios/dist/axios.js"></script>
<script src="node_modules/lodash/lodash.js"></script>
</head>
<body>
<div id="hdcms">
<template v-if="regType=='mail'">
郵箱: <input type="text" name="username" key="mail-register">
</template>
<template v-else>
手機: <input type="text" name="username" key="phone-register">
</template>
<br>
<input type="radio" value="mail" v-model="regType"> 郵箱注冊
<input type="radio" value="phone" v-model="regType"> 手機注冊
</div>
<script>
var app = new Vue({
el: '#hdcms',
data: {
regType: 'mail'
}
});
</script>
</body>
</html>
- html&jquery網頁特效
- 標簽分類及特點
- 關于文字標簽
- 網頁定時跳轉
- css透明度和插件
- 0.前端常用工具
- 1.tab切換效果
- 2.tab切換效果多個代碼復用
- 3.百度新聞導航條效果
- 4.解決鼠標移入過快的問題
- 5.滾動條位置
- 6.元素尺寸
- 7.全選反選操作
- 8.固定定位
- 9.開關效果
- 10.節點操作
- 11.仿小米商品展示效果
- 12.仿小米商品展示效果復用
- 13.固定導航欄效果
- 14.凡客輪播圖效果
- 15.頂部下滑廣告效果
- 16.京東左右滑動輪播圖
- 17.京東左右滑動無縫輪播圖
- 18.選擇器
- 19.篩選
- 20.開關效果
- 21.滑動效果
- 22.小米商品效果css實現
- 23.元素水平垂直居中
- laravel5.6
- LARAVEL 介紹&安裝
- javascript & css 腳手架
- php常用工具類
- 安裝laravel-ide-helper增強代碼提示
- 使用migration創建表和數據填充
- 解決mysql5.7以下laravel不能執行數據遷移的問題
- 路由
- 登陸操作自定義模型
- 使用中間件middleware進行登錄權限驗證
- 進行表單驗證處理
- 使用laracasts-flash定制消息提示
- 資源路由
- 寶塔面板安裝fileinfo擴展
- laravel上傳處理與使用hdjs快速實現前端上傳組件
- thinkphp
- phpstorm
- phpstorm安裝插件
- 定義快捷鍵
- 關閉提示
- 將代碼實時同步到遠程服務器
- sublime
- composer
- git使用
- git安裝和配置作者信息
- git新建項目和維護項目
- git日志操作
- git別名操作
- git分支操作
- git生成發布壓縮包
- git系統別名
- gitrebase操作
- 使用SSH與GITHUB遠程服務器進行無密碼連接
- 本地版本庫主動使用remote與遠程GITHUB進行關聯
- 本地分支與GITHUB遠程分支同步
- 項目實戰-新入職員工參與項目開發時分支使用
- 自動部署
- ios開發
- linux
- 1.centos6.5 mysql忘記登入密碼
- html5
- 標簽
- 表單
- 音頻與視頻
- webstorage儲存
- canvas
- css3
- 01.CSS3布局
- 02.transition動畫
- 03.animation動畫
- 04.flex彈性盒模型
- Less
- gulpjs
- es6
- ES6模塊化
- let和const命令
- ES6函數擴展&解構賦值
- JavaScript之數據遍歷
- class類
- Set和Map數據結構
- Vue
- 1.創建第一個應用
- 2.屬性動態綁定
- 3.表達式
- 4.解決phpstorm不識別ECMASCRIPT6語法的問題
- 5.watch監聽屬性
- 6.使用object與array控制class
- 7.條件渲染
- 8.循環
- 9.變異方法
- 10.事件
- 11.表單
- 12.組件
- 13.css過渡動
- 14.js庫控制vue過渡動作
- 15.自定義指令directive
- 16.使用vue-cli初始化單頁面應用
- 17.Vue-router路由
- 18.vuex
- 19.vue-cli
- webpack
- zanui
- nodejs