写在前面的话：

文章是个人学习过程中的总结，为方便以后回头在学习。

文章中会参考官方文档和其他的一些文章，示例均为亲自编写和实践，若有写的不对的地方欢迎大家和我一起交流。

VUE基础系列目录

《VUE基础系列（一）——VUE入坑第一篇》

《VUE基础系列（二）——VUE中的methods属性》

《VUE基础系列（三）——VUE模板中的数据绑定语法》

《VUE基础系列（四）——VUE中的指令（上）》

《VUE基础系列（五）——VUE中的指令（中）》

一.v-model

v-model是作用于input/textarea等表单控件的双向数据绑定指令，当我们修改表单元素的内容，会自动的更新vue中的数据

#示例　

<!DOCTYPE html>

<html>

<head>

    <title>vue中的指令(中)</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id='box'>

        <input v-model='msg' type='text'/>

        <br>

        这里是msg的值：{{msg}}

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el: '#box',

            data: {

                msg: 'hello'

            }

        });

    </script>

</body>

</html>

#结果

　　我们可以清楚的看到，当我们改变了input输入框的内容时，数据自动的更新到了msg中，相应的输入框下方的的值也发生了变化，这就是v-model的特性。

二.v-show

v-show称为vue中的条件渲染，它可以控制元素的隐藏和显示：通过元素的display属性值去控制。用法也比较简单，我们直接看示例。

#示例

<!DOCTYPE html>

<html>

<head>

    <title>vue中的指令(中)</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id='box'>

        <h1 v-show='hideValue'>我是一段文本，会被隐藏</h1>

        <h1 v-show='showValue'>我是一段文本，会正常显示</h1>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el: '#box',

            data: {

                showValue: true,

                hideValue: false

            }

        });

    </script>

</body>

</html>

#结果

　　可以看到，当v-show中的表达式的值为真时，文本会正常显示；为假时，元素会添加一个内联元素：display:none;

注意：在javascript中，表达式的条件为真不只是它的值为true，为假的也不一定是false。

三.v-if / v-else /v-else-if

　　v-if也是属于vue中的条件渲染指令，作用同v-show一样用于控制元素的显示和隐藏，不一样的是v-if的javascript表达式为假时，元素不会存在于DOM文档中的。

#示例

<!DOCTYPE html>

<html>

<head>

    <title>vue中的指令(中)</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id="box">

        <h1 v-if='isDisplay'>isDisplay为真</h1>

        <h1 v-if='hideValue'>hideValue为假,该元素不会显示在界面上,也不会出现在DOM文档中</h1>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el: '#box',

            data: {

                isDisplay: true,

                hideValue: false

            }

        })

    </script>

</body>

</html>

#结果

　　可以看到hideValue为假，所以对应的h1元素并没有存在于DOM文档中。

四.v-for

　　v-for指令用于循环渲染一组数据（数组或者对象）。下面我们使用v-for指令输入一下数组和对象的值。

#v-for循环数组

<!DOCTYPE html>

<html>

<head>

    <title>vue中的指令(中)</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id="box">

        <ul>

            <li v-for='item in arr'>

                {{item}}

            </li>

        </ul>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el: '#box',

            data: {

                arr: ['今天','起床','很早','心情','不错']

            }

        })

    </script>

</body>

</html>

　　v-for除了循环出每一个数组元素item之外，还支持第二个参数作为数组的下标。

<!DOCTYPE html>

<html>

<head>

    <title>vue中的指令(中)</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id="box">

        <ul>

            <li v-for='(item,index) in arr'>下标为{{index}}的数据为：{{item}}</li>

        </ul>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el: '#box',

            data: {

                arr: ['今天','起床','很早','心情','不错']

            }

        })

    </script>

</body>

</html>

#v-for循环对象

<!DOCTYPE html>

<html>

<head>

    <title>vue中的指令(中)</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id="box">

        <!-- 循环对象：第一种 -->

        <ul>

            <li v-for='item in obj'>{{item}}</li>

        </ul>

        <!-- 循环对象：第二种 -->

        <ul>

            <li v-for='(item,key) in obj'>{{key}}:{{item}}</li>

        </ul>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el: '#box',

            data: {

                arr: ['今天','起床','很早','心情','不错'],

                obj:{

                    name: 'test',

                    age: 20,

                    desc: '坚持就是苦逼'

                }

            }

        })

    </script>

</body>

</html>

五.v-on

v-on指令用于监听元素的事件，在事件触发时，可以执行一个javascript表达式或者执行一个javascript函数。

#基本的语法

<el on:click="javascript表达式或者javascript函数">  </el>

或者

<el @click="javascript表达式或者javascript函数">  </el>

#示例

<!DOCTYPE html>

<html>

<head>

    <title>vue中的指令(中)</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div id="box">

        <button v-on:click="clickMe">点击我,我会调用一个函数</button>

        <hr>

        <button v-on:click="counter++">点击我,count就会加1</button>

        <p>counter = {{counter}}</p>

        <hr>

        v-on:的另外一种写法@click

        <button @click="counter++">点击我,count就会加1</button>

    </div>

    <script type="text/javascript">

        var vm = new Vue({

            el: '#box',

            data: {

                counter: 0

            },

            methods: {

                clickMe: function(){

                    // 事件对象

                    console.log(event);

                    // 事件绑定的元素

                    console.log(event.target);

                }

            }

        })

    </script>

</body>

</html>

六.总结

  • v-model指令作用于表单控件，有双向数据绑定的效果
  • v-show为条件渲染指令用于控制元素的隐藏和显示：通过元素的display属性值去控制
  • v-if/v-else/v-else-if为条件渲染指令用于控制元素的隐藏和显示：v-if的javascript表达式为假时，元素不会存在于DOM文档中
  • v-on指令用于监听元素的事件

Vue基础系列（五）——Vue中的指令（中）的更多相关文章

  1. Vue基础系列（四）——Vue中的指令（上）

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  2. Vue基础系列（三）——Vue模板中的数据绑定语法

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  3. Vue基础系列（二）——Vue中的methods属性

      写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...

  4. 【C++自我精讲】基础系列五 隐式转换和显示转换

    [C++自我精讲]基础系列五 隐式转换和显示转换 0 前言 1)C++的类型转换分为两种,一种为隐式转换,另一种为显式转换. 2)C++中应该尽量不要使用转换,尽量使用显式转换来代替隐式转换. 1 隐 ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页+指令(一)

    缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...

  6. Vue基础（环境配置、内部指令、全局API、选项、内置组件）

    1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...

  7. Vue基础之初识Vue

    Vue特点及优点 小巧,压缩后体积17KB: 渐进式,不需要一口吃成大胖子,一上来就用所有的东西,可以一步一步.有阶段的先吃成小胖子: 数据驱动,双向数据绑定,MVVM模式,详见下一段 指令,例如v- ...

  8. web基础系列(五)---https是如何实现安全通信的

    https是如何实现安全通信的 如果有不正确的地方,还望指出! web基础系列目录 总结几种常见web攻击手段极其防御方式 总结几种常见的安全算法 回顾 总结几个概念(具体描述可以看上一篇文章) 数字 ...

  9. 夯实Java基础系列10：深入理解Java中的异常体系

    目录 为什么要使用异常 异常基本定义 异常体系 初识异常 异常和错误 异常的处理方式 "不负责任"的throws 纠结的finally throw : JRE也使用的关键字 异常调 ...

随机推荐

  1. 使用Redis实现延时任务(一)

    使用Redis实现延时任务(一) 前提 最近在生产环境刚好遇到了延时任务的场景,调研了一下目前主流的方案,分析了一下优劣并且敲定了最终的方案.这篇文章记录了调研的过程,以及初步方案的实现. 候选方案对 ...

  2. scss--函数 (Functions)--unit

    (Sass::Script::Value::String) unit($number) Returns the unit(s) associated with a number. Complex un ...

  3. kipmio占用cpu资源过高

    虽然这是一个利用空余的CPU资源进行一些接口自动调节的任务,但看着占那么多的资源还是怕出意外. 可以临时降低 echo 100 > /sys/module/ipmi_si/parameters/ ...

  4. linux shell编程之变量和bash配置文件（第一篇）

    编程语言有两类 强类型:如C语言.数据具有其特定的类型,先声明定义后才能使用.数据运算时必须符合类型要求(如不能把字符串类型数据直接与整型数据做算数运算) 弱类型:如shell.数据默认为字符型,不用 ...

  5. Pycharm报错连接linux服务器报错：Could not verify `ssh-rsa` host key with fingerprint

    忘记了截图,后来解决了就懒得再去重新制造错误了.大概记得是通过ssh连接linux时,报错 Could not verify `ssh-rsa` host key with fingerprint . ...

  6. Java并发编程：Callable、Future和FutureTask【转】

    原文链接:http://www.cnblogs.com/dolphin0520/p/3949310.html 创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable接口. 这 ...

  7. 痞子衡嵌入式：恩智浦i.MX RTxxx系列MCU启动那些事（2）- Boot配置(ISP_Pin, OTP)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MX RTxxx系列MCU的Boot配置. 在上一篇文章 Boot简介 里痞子衡为大家介绍了Boot基本原理以及i.MXRTx ...

  8. 【RN - 基础】之React Native常见问题及解决方案

    unable to load script from assets index.android.bundle... 问题原因: 找不到Android项目中的assets文件夹. 解决方案: 1.在An ...

  9. IDEA 自定义代码块

    使用快捷键(ctrl+alt+s)找到:从idea的菜单File->Settings->Editor->Live Templates 先添加Template Group,然后添加Li ...

  10. Python 中如何实现参数化测试？

    Python 中如何实现参数化测试? 之前,我曾转过一个单元测试框架系列的文章,里面介绍了 unittest.nose/nose2 与 pytest 这三个最受人欢迎的 Python 测试框架. 本文 ...