|
[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内容
| 
窥视卡
雷达卡
发表于 2018-12-1 11:47:49
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2018-12-1 12:06:29
