vue 基础知识
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 基础知识的更多相关文章
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础知识之vue-resource和axios
Vue基础知识之vue-resource和axios 原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...
- Vue基础知识简介
基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...
- Vue基础知识梳理
1. Vue 实例 1.1 创建一个Vue实例 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的.可复用的组件树组成.demo 1.2 数据与方法 数据的响应式渲 ...
- Vue基础知识
Vue特性: 双向数据绑定 通过 指令 扩展了 HTML,通过 表达式 绑定数据到 HTML 解耦视图与数据 可复用组件 虚拟DOM -> 对象 M-V-VM 数据驱动视图 Vue声明周期: b ...
- Vue基础知识之组件及组件之间的数据传递(五)
vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码 note: 1.在标签命中不要使用大写,标签名字必须用短横线隔开 2.模板中只能有一个根元素,不能使用并列标签. 定义组件 全 ...
- Vue基础知识之过滤器(四)
过滤器 1.过滤器的用法,用 '|' 分割表达式和过滤器. 例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数. 用两个过滤器:{{msg ...
- Vue基础知识之vue-resource和axios(三)
vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的 ...
- Vue基础知识之常用属性和事件修饰符(二)
Vue中的常用选项 1.计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法.里面的 计算属性简单来说,就是根据数据推算出来的值,当给这个值赋值时可以影响其 ...
- Vue基础知识之指令和生命周期(一)
优点:轻量易学,灵活. 核心:通过尽可能简单的API来实现响应的数据绑定和组合的视图组件. 1.数据绑定:数据改变,驱动视图的自动更新. 2.视图组件化:把整个网页拆分成一个个区块,每个区块都可以看成 ...
随机推荐
- css3D的魅力
前言: 最近玩了玩用css来构建3D效果,写了几个demo,所以博客总结一下. 在阅读这篇博客之前,请先自行了解一下css 3D的属性,例如:transform-style,transform-or ...
- 五个最佳RSS新闻阅读器
文章出自http://www.williamlong.info/archives/1591.html 在博客和在线新闻充斥的互联网上,大量信息已经使得用户阅读量过载,幸运的是,通过RSS Feed提供 ...
- BootStrapTable获取选中数据值并传参至父页面
如何实现以下效果呢? 首先,我们先要了解一下BootStrapTable如何获取选中数据的具体值. 如下图所示,怎样选择任意一行,获取其中的数据 一.首先想要选择任意一行,就得必须先有选择框,选择框是 ...
- ApplicationContextAware 接口的作用
接口说明:当一个类实现了这个接口之后,这个类就可以方便地获得 ApplicationContext 中的所有bean.换句话说,就是这个类可以直接获取Spring配置文件中,所有有引用到的bean对象 ...
- .net core使用Ocelot+Identity Server统一网关验证
源码下载地址:下载 项目结构如下图: 在Identity Server授权中,实现IResourceOwnerPasswordValidator接口: public class IdentityVal ...
- BZOJ_2058_[Usaco2010 Nov]Cow Photographs_逆序对
BZOJ_2058_[Usaco2010 Nov]Cow Photographs_逆序对 题意: 奶牛的图片 Farmer John希望给他的N(1<=N<=100,000)只奶牛拍照片, ...
- Asp.Net 中Grid详解两种方法使用LigerUI加载数据库数据填充数据分页
1.关于LigerUI: LigerUI 是基于jQuery 的UI框架,其核心设计目标是快速开发.使用简单.功能强大.轻量级.易扩展.简单而又强大,致力于快速打造Web前端界面解决方案,可以应用于. ...
- 一个优秀团队leader应该具备的几点素质
首先,技术要过硬.毕竟一个团队是在靠技术为别人创造价值的,一定程度上,团队leader的技术能力决定了整个团队的技术上限.leader对技术的坚持和追求很可能会影响团队成员对技术的坚持和追求,至少le ...
- 单台PC玩转NEUTRON(一:环境准备)
要开始从事云计算网络领域的技术研究.过去10年一直是从事传统网络相关的工作,新的事务在知识结构上还有一些差异,边学边写,作为个人总结,也共享给大家. 工欲善其事必先利其器,好的开发调测环境让人学习工作 ...
- 【转】APP功能测试要领
也许大家从事APP功能测试已经有一段时间了,心中一定有一个疑问,怎么样才能提高测试的覆盖面呢,我今天把APP功能测试内容分为APP本身的功能,APP关联的事务.APP外部环境.APP其他四大块来给大家 ...