本文介绍了Vue框架中指令的基本概念及使用方法，重点讲解了v-if指令的功能与实现效果，并通过示例代码展示了如何根据条件显示或隐藏DOM元素。
指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了 v-for，之后再讨论）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
1.不带参数的指令
这里我们以v-if指令为例。
| <p v-if="seen">Now you see me</p> |
这里， v-if 指令将根据表达式 seen 的值的真假来移除/插入 <p> 元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>指令</h1>
<p>学的不仅是技术，更是梦想！</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
</body>
</html>
运行结果如下：
在这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。如果seen的值为true时，则插入p元素，否则不插入p元素。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
