Vue.js添加语句-v-if学习笔记如下：
v-if条件判断， 就是实现， if中的条件为true，显示一个效果， false则不显示， 跟js的if条件判断一样， 下面就用实例看下具体的实现方式
实例：
[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>
运行结果：
修改上面实例中， 在底部赋值的时候， 将ok设置为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: true,
ok: false
}
})
</script>
</body>
</html>
运行结果如下：
想法， 如果把seen设置为false， 则不限图2的内容， 显示如下：
html代码如下显示：
[HTML] 纯文本查看 复制代码
[mw_shl_code=html,true]<!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>
[/mw_shl_code]作者: 范范 时间: 2018-12-6 15:41
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
作者: 竹林风 时间: 2018-12-6 16:02
支持一下，楼主威武
作者: 站长苏飞 时间: 2018-12-6 16:09
我只是路过打酱油的。
作者: 惜 时间: 2018-12-6 17:35
无回帖，不论坛，这才是人道。
作者: liu 时间: 2018-12-6 17:42
强烈支持楼主ing……
作者: Amy 时间: 2018-12-7 17:24
强烈支持楼主ing……
| 欢迎光临 苏飞论坛 (http://www.sufeinet.com/) | Powered by Discuz! X3.4 |