1. v-if 的使用: 假如后端传过来的数据,1 表示 “已完成”, 0表示 “未完成”, 那么如何根据 1、0显示出对应的表示信息呢?

<p><span v-if="data.isFinished === 0">未完成</span><span v-if="data.isFinished === 1">已完成</span></p>

2. v-for 的使用:用 v-for 指令将一个数组对应一组元素  https://cn.vuejs.org/v2/guide/list.html

  • v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。
  • v-for 还支持一个可选的第二个参数为当前项的索引。
  • 也可以用 v-for 通过一个对象的属性来迭代。(像一个字典,对它的 value、key、index进行遍历)
  • 如果不写 v-bind:key 的话,会报错 : “ Elements in iteration expect to have 'v-bind:key' directives”
  • 解决办法有两个: 1. 添加 v-bind:key="index"  2. 在build处关闭eslint检测
  • //html
    <span v-for="(line, index) in data.lines" v-bind:key="index">{{ line }} </span> //data
    "lines": [
    "line4"
    ]

 

vue 基础知识的更多相关文章

  1. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  2. Vue基础知识之vue-resource和axios

    Vue基础知识之vue-resource和axios  原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...

  3. Vue基础知识简介

    基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...

  4. Vue基础知识梳理

    1. Vue 实例 1.1 创建一个Vue实例 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的.可复用的组件树组成.demo 1.2 数据与方法 数据的响应式渲 ...

  5. Vue基础知识

    Vue特性: 双向数据绑定 通过 指令 扩展了 HTML,通过 表达式 绑定数据到 HTML 解耦视图与数据 可复用组件 虚拟DOM -> 对象 M-V-VM 数据驱动视图 Vue声明周期: b ...

  6. Vue基础知识之组件及组件之间的数据传递(五)

    vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码 note: 1.在标签命中不要使用大写,标签名字必须用短横线隔开 2.模板中只能有一个根元素,不能使用并列标签. 定义组件 全 ...

  7. Vue基础知识之过滤器(四)

    过滤器 1.过滤器的用法,用 '|' 分割表达式和过滤器. 例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数. 用两个过滤器:{{msg ...

  8. Vue基础知识之vue-resource和axios(三)

    vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的 ...

  9. Vue基础知识之常用属性和事件修饰符(二)

    Vue中的常用选项 1.计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法.里面的 计算属性简单来说,就是根据数据推算出来的值,当给这个值赋值时可以影响其 ...

  10. Vue基础知识之指令和生命周期(一)

    优点:轻量易学,灵活. 核心:通过尽可能简单的API来实现响应的数据绑定和组合的视图组件. 1.数据绑定:数据改变,驱动视图的自动更新. 2.视图组件化:把整个网页拆分成一个个区块,每个区块都可以看成 ...

随机推荐

  1. 使用EHCache需要注意的几个问题(转)

    最近做一个小项目,需要对一批数据进行缓存,且要求持久化到磁盘.使用ehcache非常简单和直观,一般来说只需要配置ehcache.xml文件,接着直接使用@Cacheable, @Cacheput, ...

  2. 对于Javascript 执行上下文的理解

    转载无源头地址 在这篇文章中,将比较深入地阐述下执行上下文 – JavaScript中最基础也是最重要的一个概念.相信读完这篇文章后,你就会明白javascript引擎内部在执行代码以前到底做了些什么 ...

  3. 概率与统计推断第二讲homework

    作业目的: 体会条件独立 1.现需要设计一个根据一个人是否是学生$S$(布尔变量)和其体重$W$(连续变量)判断该人的性别$G$(布尔变量).假设在给定$G$的情况下$S$和$W$独立,且假设概率分布 ...

  4. PHP 7.3 我们将迎来灵活的 heredoc 和 nowdoc 句法结构

    php.net RFC 频道已经公布了 PHP 7.3 的 Heredoc 和 Nowdoc 语法更新,此次更新专注于代码可读性: Heredoc 和 Nowdoc 有非常严格的语法,有些时候这令很多 ...

  5. python实现邮件的发送

    一.163邮箱设置 进入163邮箱,点击设置中的pop3/smtp/imap 开启smtp服务,如果没有开启,点击设置,手机号验证后勾选开启即可,开启后图如下: 主要用到的就是smtp服务器:smtp ...

  6. HTML5 CSS3 诱人的实例 :canvas 模拟实现电子彩票刮刮乐

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34089553 今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的, ...

  7. 6.app架构基础

    app架构,一个听起来高大尚的名字,很多小伙伴听到这个词语感觉很迷茫,不知道架构具体说的是啥?在q群里,"app后端应该怎么架构"这个问题被问了无数次.通过阅读本文,根据本人提出的 ...

  8. 原生JS和JQuery的区别

    1.原生js和jQuery的入口函数加载模式不同 原生js等页面dom加载完成并且图片等资源也加载完成之后才会执行: jQuery则是等页面dom加载完成执行,不会等图片等资源也加载完成: (也就是说 ...

  9. BZOJ_3585_mex && BZOJ_3339_Rmq Problem_主席树

    BZOJ_3585_mex && BZOJ_3339_Rmq Problem_主席树 Description 有一个长度为n的数组{a1,a2,...,an}.m次询问,每次询问一个区 ...

  10. BZOJ_3626_[LNOI2014]LCA_离线+树剖

    BZOJ_3626_[LNOI2014]LCA_离线+树剖 题意: 给出一个n个节点的有根树(编号为0到n-1,根节点为0).一个点的深度定义为这个节点到根的距离+1. 设dep[i]表示点i的深度, ...