[Vue.js]学习笔记-Vue.js模板语法-指令
导读部分
教程部分
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
另: Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
Vue.js的模板语法有如下几种(点击进入各个详情介绍哦): 4. 指令
Vue.js模板语法-指令学习笔记如下:
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。 通过如下例子具体展示: [HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>苏飞论坛</h1>
<p>学的不仅是技术,更是梦想!</p>
<p>哈哈哈,打字辛苦啊!!!</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
</body>
</html> 运行结果如下:
修改js, 将seen设置为false, 整体代码如下: [HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<h1>苏飞论坛</h1>
<p>学的不仅是技术,更是梦想!</p>
<p>哈哈哈,打字辛苦啊!!!</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: false,
ok: true
}
})
</script>
</body>
</html> 运行如下:
通过上面两个实例, 可以清晰的看到, 在html中使用了, if条件指令, 即v-if
在第一个实例中, 两个v-if的值, seen, ok 在js赋值中, 均设置为true, 顾: 第一个实例显示结果, 所有的内容均显示在页面上。 在第二个实例中, 两个v-if的值, seen为false, ok为true, 顾: 只显示了ok里面的内容, 而seen中的内容则不显示。
通过上面的实例就可以看到, v-if相当于是一个条件判断语句, 在js中赋值时, 如果为true, 则内容显示, 如果为false, 则不显示dom内容
|