{{xxx}} 基本的插值表达式

插值表达式 使用两个大括号 {{ data中定义的数据名 }}
可以将数据插入到指定的位置

这种写法不仅可以显示data属性里定义的值，也可以书写js中的表达式，可以使用methods中定义的函数等等

其他数据渲染指令

  • v-text：指定元素的内容（纯文本）
  • v-html：指定元素的内容（解析html）
  • v-pre：用于跳过这个元素和它的子元素的编译过程，用于显示原本的Mustache语法（{{xxx}}）
  • v-once：只进行一次渲染，不进行响应式，不随着数据的改变而改变

v-cloak 防止闪烁

如果页面先加载了{{...}}，随后加载了vue的文件，则会出现闪烁的问题
解决方法是 给闪烁的元素加上一个 v-cloak
并添加一个样式 [v-cloak] {display: none;}'

vue学习笔记：数据渲染操作的更多相关文章

  1. Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  2. tensorflow学习笔记——使用TensorFlow操作MNIST数据（2）

    tensorflow学习笔记——使用TensorFlow操作MNIST数据(1) 一:神经网络知识点整理 1.1,多层:使用多层权重,例如多层全连接方式 以下定义了三个隐藏层的全连接方式的神经网络样例 ...

  3. tensorflow学习笔记——使用TensorFlow操作MNIST数据（1）

    续集请点击我:tensorflow学习笔记——使用TensorFlow操作MNIST数据(2) 本节开始学习使用tensorflow教程,当然从最简单的MNIST开始.这怎么说呢,就好比编程入门有He ...

  4. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  5. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  6. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  7. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  8. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  9. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  10. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

随机推荐

  1. C++ 宏定义创建（销毁）单例

    Util.h: #define CREATE_SINGLETON_POINTER(CLASS,INSTANCE,MUTEX) if (NULL == INSTANCE) \ { \ MUTEX.loc ...

  2. 【C语言】创建一个函数，利用该函数将两个字符串连接起来

    代码: #include<stdio.h> ], ]) { int i, j; ; c[i] != '\0'; i++); ; d[j] != '\0'; j++) { c[i++] = ...

  3. MySQL删除语句比较，清空表数据，重置自增长索引

    drop truncate delete 程度从强到弱 1.drop table tbdrop将表格直接删除,没有办法找回 2.truncate (table) tbtruncate 删除表中的所有数 ...

  4. HashMap知识初探

    public class TestHashMap { /** * HashMap是数组和链表组合构成的数据结构 * 数组里面每个地方都存了key-value这样的实例Java7叫Entry,Java8 ...

  5. 空指针异常与Optional类

    一.什么是空指针异常 当程序需要对象实例的时候返回null就会抛出空指针异常(NullPointerException,简称NPE).包括以下情况: 调用一个null对象实例的方法 访问或修饰null ...

  6. C#面向对象三大特性：封装

    什么是封装 定义:把一个或多个项目封闭在一个物理的或者逻辑的包中.在面向对象程序设计方法论中,封装是为了防止对实现细节的访问. 封装的优点 1. 隔离性,安全性.被封装后的对象(这里的对象是泛指代码的 ...

  7. warmup

    先简单了解下源码中的2个函数: <?php echo mb_strpos("朋友比生命还重要?或许是吧" . '?',"?"); echo "\ ...

  8. mybatis批量插入和更新

    批量插入 <insert id="add" parameterType="java.util.List"> insert all <forea ...

  9. opencv python：边缘保留滤波（EPF）

    EPF:E边缘,P保留,F滤波 import cv2 as cv import numpy as np def bi_demo(image): # bilateralFilter(src, d, si ...

  10. Vue基础笔记3

    插槽指令 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...