vue.js的常用指令
vue.js是指令已v-開頭的,他們作用於HTML元素,指令提供了一些特殊的特性,將指令綁在元素上時,指令回味綁定的目標元素添加一些特殊的行爲,我們可以將指令看做特殊的HTML特性
vue.js提供了一些常用的內置指令,接下來我們將介紹v-if指令
v-if是條件渲染指令,他根據表達式的真假來刪除和插入元素,它的基本語法如下:
v-if=”expression”
expression是一個返回bool值的表達式,表達式可以使一個bool屬性,也可以返回一個bool的運算時。列如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">No!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>
</html>
注意:yes no age name 這四個變量都來源於vue實例選項對象的DATA屬性