App下載
4. 模板語法2
Vue2入門課程 / 4. 模板語法2
手機也能上課
App下載
1/10

指令

指令 (Directives) 是帶有 v- 前綴的特殊特性。指令特性的值預期是單個 JavaScript 表達式 (v-for 是例外)。

指令的職責是,當表達式的值改變時,將其產生的連帶影響,響應式地作用于 DOM。

例如:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">

<p v-if="seen">現(xiàn)在你看到我了</p>

</div>

<script>

var vm = new Vue({

el:'#app',

data:{

seen: 1

}

});

setTimeout(()=>{

vm.seen=0;

}, 2000)

</script>

運行結果:

vue3

這里,v-if 指令將根據(jù)表達式 seen 的值的真假來插入/移除 <p> 元素。


參數(shù)

一些指令能夠接收一個“參數(shù)”,在指令名稱之后以冒號表示。例如,v-bind 指令可以用于響應式地更新 HTML 特性:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<a v-bind:href="url">w3cschool</a>
</div>
<script>
var vm = new Vue({
	el:'#app',
	data:{
	    url: 'https://m.w3cschool.cn'
	}
});
</script>

結果:



+10 經(jīng)驗 +10積分
解析
提示
參考答案
+10 經(jīng)驗 +10積分
視頻播放結束,是否學習下一節(jié)?