博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端与移动开发之vue-day1(3)
阅读量:6800 次
发布时间:2019-06-26

本文共 1011 字,大约阅读时间需要 3 分钟。

  1. 迭代数组

    • 索引:{
      {i}} --- 姓名:{
      {item.name}} --- 年龄:{
      {item.age}}
  2. 迭代对象中的属性

    {
    {val}} --- {
    {key}} --- {
    {i}}
  3. 迭代数字

    <p v-for="i in 10">这是第 {

    {i}} 个P标签</p>

2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。

Vue指令之v-if和v-show

一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。
品牌管理案例添加新品牌删除品牌根据条件筛选品牌
1.x 版本中的filterBy指令,在2.x中已经被废除:

filterBy - 指令

  {
{item.id}} {
{item.name}} {
{item.ctime}} 删除

在2.x版本中手动实现筛选的方式:

筛选框绑定到 VM 实例中的 searchName 属性:


输入筛选名称:

在使用 v-for 指令循环每一行数据的时候,不再直接 item in list,而是 in 一个 过滤的methods 方法,同时,把过滤条件searchName传递进去:

search 过滤方法中,使用 数组的 filter 方法进行过滤:search(name) {  return this.list.filter(x => {    return x.name.indexOf(name) != -1;  });}

转载于:https://blog.51cto.com/13517854/2316806

你可能感兴趣的文章
ios logo 启动页大小
查看>>
(四)构建dubbo分布式平台-maven代码结构
查看>>
Vue插件从封装到发布
查看>>
扒一扒我们生活中常见的品牌小程序
查看>>
使用注解干掉大量if else和switch
查看>>
【本人秃顶程序员】实战并发-使用分布式缓存和有限状态机
查看>>
[MySQL光速入门]019 分别使用loop, while, repeat 来计算 从0加到100 答案
查看>>
浅析libuv源码-node事件轮询解析(2)
查看>>
SpringBoot使用Nacos配置中心
查看>>
CentOS6.x下自动安装本地和网络YUM源
查看>>
mysql基础知识之增删查改使用介绍
查看>>
C++11 提升Vector效能的技巧
查看>>
Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask.
查看>>
docker使用指南
查看>>
如何让对方发给你需要的文件格式?
查看>>
php学习笔记--运算符号
查看>>
IPv6已分配地址中国仅占0.29%
查看>>
解决Lync2010和Lync2013转接电话断开的问题
查看>>
find grep wc awk sed sort uniq split指令详解
查看>>
高并发中的卡死状态 -HashMap
查看>>