[Vue.js]学习笔记-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>

运行结果如下：

(, 下载次数: 85)

修改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>

运行如下：

(, 下载次数: 122)

通过上面两个实例，可以清晰的看到，在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:56
v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素

作者: 站长苏飞 时间: 2018-12-1 11:56
框架以后将上前端的必然趋势。

作者: Amy 时间: 2018-12-1 12:06
好帖子，学习了

作者: 竹林风 时间: 2018-12-1 12:25
好帖子，不错呢！

作者: 范范 时间: 2018-12-1 12:32
v-on 指令，它用于监听 DOM 事件

如下： <a v-on:click="doShow">

作者: 惜 时间: 2018-12-2 10:38
激动人心，无法言表！

欢迎光临苏飞论坛 (http://www.sufeinet.com/)