Vue 指令 詳解
阿新 • • 發佈：2018-11-12
程式碼塊放上來後，程式碼縮排有點問題，還請諒解，將就看看就好。
1. v-if & v-else &v-show 條件判斷
<!DOCTYPE html> <html> <head> <title>v-if</title> </head> <body> <h1>v-if</h1> <hr> <div id="app"> <div v-if="isLogin">v-if 是判斷是否載入</div> <div v-else>請登入</div> <div v-show="isLogin"> v-show 只是判斷是否顯示，無論布林值是什麼都是載入狀態 </div> </div> <script type="text/javascript" src="../assets/js/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ isLogin: true } }) </script> </body> </html>
2.v-for 列表迴圈
<!DOCTYPE html> <html> <head> <title>v-for 例項</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>v-for 例項</h1> <hr> <div id="app"> <ol> <li v-for="item in soreItem">{{item}}</li> </ol> <ul> <li v-for="(student,index) in soreStudents"> {{index+1}}.姓名：{{student.name}}，成績{{student.score}} </li> </ul> </div> <script> var app = new Vue({ el:"#app", data:{ items: [1996,03,25,22], students:[ {name:"小明",score:68}, {name:"小紅",score:84}, {name:"小偉",score:59}, {name:"小付",score:100} ] }, computed:{ soreItem(){ return this.items.sort(sortNumber).reverse(); }, soreStudents(){ return sortByKey(this.students,'score'); } } }) //陣列排序 function sortNumber(n,m){ return n - m } //陣列物件方法排序: function sortByKey(array,key){ return array.sort(function(a,b){ var x=a[key]; var y=b[key]; return ((x<y)?-1:((x>y)?1:0)); }); } </script> </body> </html>
3.v-text & v-html 渲染
<!DOCTYPE html> <html> <head> <title>v-text & v-html</title> </head> <body> <h1>v-text & v-html</h1> <hr> <div id="app"> <div v-text="mesText"></div> <div v-html="msgHtml"></div> </div> <script type="text/javascript" src="../assets/js/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ mesText:"這段文字由v-text輸出", msgHtml:'<div style="color:red;">這段文字由v-html輸出<div>' } }) </script> </body> </html>
4.v-on事件監聽
<!DOCTYPE html>
<html>
<head>
<title>v-on事件監聽器</title>
</head>
<body>
<h1>v-on事件監聽器</h1>
<hr>
<div id="app">
<div>本廠產量：{{count}}</div>
<button v-on:click="jiafen">加分</button>
<button v-on:click="jianfen">減分</button>
<button @click="reset">清空</button>
<hr>
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
</div>
<!-- v-on 還有一種簡單的寫法 @click-->
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
count:0,
secondCount:''
},
methods:{
jiafen(){
this.count++
},
jianfen(){
this.count--
},
onEnter(){
this.count = this.count+parseInt(this.secondCount)
this.secondCount = ''
},
reset(){
this.count = 0
}
}
})
</script>
</body>
</html>5.v-model 資料繫結
<!DOCTYPE html>
<html>
<head>
<title>v-model 例項</title>
</head>
<body>
<h1>v-model 例項</h1>
<hr>
<div id="app">
<div>繫結訊息：{{message}}</div>
<p>v-model <input type="text" v-model="message"></p>
<hr>
<!--
.lazy：取代 imput 監聽 change 事件。
.number：輸入字串轉為數字。
.trim：輸入去掉首尾空格。
用法： v-mode.lazy="",在v-model後面接上修飾符即可
-->
<h1>多選按鈕繫結一個值</h1>
<input type="checkbox" v-model="isTrue" id="isTF">
<label>{{isTrue}}</label>
<hr>
<h1>多選按鈕繫結一個值</h1>
<div>
<input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
<label for="JSPang">JSPang</label><br/>
<input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
<label for="JSPang">Panda</label><br/>
<input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
<label for="JSPang">PanPan</label>
<p>{{web_Names}}</p>
</div>
<hr>
<h1>單選按鈕繫結資料</h1>
<div>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label><br>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<p>您選擇的性別是：<span v-text="sex"></span></p>
</div>
</div>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"",
isTrue:true,
web_Names: [],
sex:''
}
})
</script>
</body>
</html>6.v-bind屬性繫結
<!DOCTYPE html>
<html>
<head>
<title>v-bind例項</title>
<style type="text/css">
.className{
color: red;
}
.classNameA{
background: #FFEB3B;
}
</style>
</head>
<body>
<h1>v-bind例項</h1>
<hr>
<div id="app">
<p>v-bind 可以繫結標籤屬性</p>
<!-- 簡寫是直接冒號屬性:src -->
<div><img v-bind:src="srcImg"></div>
<div :class="className">繫結calss</div>
<div :style="styleName">繫結style物件</div>
<div :style="{color:white,background:blue}">繫結style</div>
<div :class="{className:isOK}">繫結class並判斷</div>
<div :class="[className,classNameA]">繫結class中的陣列</div>
<div :class="isOK?className:classNameA">繫結class中使用三元表示式</div>
</div>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"你好，世界！",
srcImg:'../assets/img/1.jpg',
className:'className',
styleName:{
color:'blue',
fontSize:'20px'
},
isOK:false,
classNameA:"classNameA",
white:"white",
blue:"blue"
}
})
</script>
</body>
</html>7.其他內部指令(v-pre & v-cloak & v-once)
<!DOCTYPE html>
<html>
<head>
<title>v-pre & v-cloak & v-once</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<h1>v-pre & v-cloak & v-once</h1>
<hr>
<div id="app">
<div v-pre>v-pre:跳過vue編譯，直接輸出原始值：{{vPre}}</div>
<div v-cloak>v-cloak:渲染完指定的整個DOM後才顯示。它必須和css樣式一起使用:{{vCloak}}
</div>
<div v-once>第一次繫結的值：{{vOnce}}</div>
<div><input type="text" v-model="vOnce"></div>
</div>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
vPre:"原始值",
vCloak:"v-cloak",
vOnce:"第一次的值"
}
})
</script>
</body>
</html>