在使用插值表达式{{  }}取data中list数组中的值时把整个表达式当做文本显示了,原因不明,但是使用v-text替换插值表达式之后问题得到解决.

原因已经查明,因为第78行,定义对象car时后面不小心加了个逗号,导致对象读取出现问题,前面的插值表达式读不到相应的数据所以把整个表达式当做文本显示.

  1. var car = { id:this.id , name:this.name , ctime:new Date()},
  2. //万恶的逗号
  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="utf-8">
  5.          <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.          <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  7.          <title>Document</title>
  8.          <script src="lib/vue-2.4.0.js"></script>
  9.          <link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7.css"/>
  10.          <!-- 需要用到JQuery吗? -->
  11.          <!-- JQuery本质是使用js进行查询,是对dom的操作,而在Vue中尽量避免对dom进行操作 -->
  12.      </head>
  13.      <body>
  14.          <div id="app">
  15.  
  16.              <div class="panel panel-primary">
  17.                  <div class="panel-heading">
  18.                      <h3 class="panel-title">添加品牌</h3>
  19.                  </div>
  20.                  <div class="panel-body form-inline">
  21.                      <label>
  22.                          ID:
  23.                          <input type="text" class="form-control" v-model="id"/>
  24.                          <!-- 这里的id是data中的id,不是list中的id -->
  25.                      </label>
  26.                      <label>
  27.                          Name:
  28.                          <input type="text" class="form-control" v-model="name"/>
  29.                          <!-- 这里的name是data中的name,不是list中的name -->
  30.                      </label>
  31.                      <!-- 在Vue中使用事件绑定机制，为元素制定处理函数时，如果加了小括号，就可以给函数传参了 -->
  32.                      <input type="button" value="添加" class="btn btn-primary" @click="add()"/>
  33.                  </div>
  34.  
  35.              </div>
  36.  
  37.              <table class="table table-bordered table-hover table-striped">
  38.                  <thead>
  39.                      <tr>
  40.                          <th>Id</th>
  41.                          <th>Name</th>
  42.                          <th>Ctime</th>
  43.                          <th>Operation</th>
  44.                      </tr>
  45.                  </thead>
  46.                  <tbody>
  47.                      <tr v-for="item in list" :key="item.id">
  48.                          <td v-text="item.id"></td>
  49.                          <td v-text="item.name"></td>
  50.                          <td v-text="item.ctime"></td>
  51.                          <td>
  52.                              <a href="">删除</a>
  53.                          </td>
  54.                      </tr>
  55.                  </tbody>
  56.              </table>
  57.          </div>
  58.          <script type="text/javascript">
  59.              var vm = new Vue({
  60.                  el:'#app',
  61.                  data:{
  62.                      id:'',
  63.                      name:'',
  64.                      list:[
  65.                          { id:1 , name: '奔驰' , ctime: new Date() },
  66.                          { id:2 , name: '宝马' , ctime: new Date() },
  67.                      ]
  68.                  },
  69.                  methods:{
  70.                       add(){    //添加的方法
  71.                           // 分析:
  72.                           // 1.获取到id和name,直接从data上获取
  73.                           // 2.组织出一个对象
  74.                           // 3.把这个对象,调用数组的相关方法,添加到当前data上的list中
  75.                           // 4.注意:在Vue中已经实现了数据的双向绑定,每当我们修改了data中的数据.Vue会监听到数据的改动,自动把最新的数据应用到页面上
  76.                           var car = { id:this.id , name:this.name , ctime:new Date()}
  77.                           this.list.push(car)
  78.                           this.id = this.name = ''
  79.                       }
  80.                  }
  81.              })
  82.          </script>
  83.      </body>
  84.  </html>

Vue实例学习过程中碰到的小问题的更多相关文章

  1. JS学习过程中碰到的小问题

    使用循环语句查找通讯录 //Setup var contacts = [ { "firstName": "Akira", "lastName" ...

  2. vue使用过程中的一些小技巧

    这些也是自己平时项目中遇到过的一些问题,看到有人整理了出来,也就转载保存一下 文章内容总结: 组件style的scoped Vue 数组/对象更新 视图不更新 vue filters 过滤器的使用 列 ...

  3. 转 Android学习笔记： 学习过程中碰到的一些问题及解决方法

    在学习Android开发的过程中遇到了不少的问题,所幸的是最终经过上网查询都得到了解决.现在将我在学习Android开发过程中遇到的一些问题及解决的方法整理如下. 1.R.java不能实时更新 问题描 ...

  4. 记录python学习过程中的一些小心得

    1.python中一切皆对象,内置数据结构也是对象.处理一个对象就是利用它带有的方法和属性,对该对象进行处理,一步步达到我们想要的结果. 2.编程时,先构思好我们处理的对象是什么,具有哪些属性和方法, ...

  5. 使用vue在开发中的一些小问题--使用vue-cli起的服务器无法在局域网访问

    2.使用vue-cli起的服务器无法在局域网访问 这个很简单,在package.json文件中的js启动项配置中增加--host 0.0.0.0 注意是--host而不是-host,此时如果有--op ...

  6. 使用vue在开发中的一些小问题--利用环境变量做一些常量的定义

    1.集中式的环境配置: (1)使用vue-cli基本上不用去处理什么,只需要在config文件夹下的文件中配置写既可: module.exports = merge(prodEnv, { NODE_E ...

  7. Matlab学习过程中的一些小问题

    1.Overload your functions by having variable number of input and output argumernt.Not only can we ov ...

  8. Vue项目过程中遇到的小问题

    1.给router-link添加点击事件 <router-link to="" @click.native=""></router-link& ...

  9. Vue.js-07：第七章 - Vue 实例的生命周期

    一.前言  在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...

随机推荐

  1. jsonp原理，封装，应用（vue项目）

    jsonp原理 JSON是一种轻量级的数据传输格式. JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 ...

  2. 对于BFS的理解和部分例题(

    (图文无关    雾 搜索是一个NOIP当中经常出现的考点,其实搜索换个方式来想也无非就是让电脑来帮你试,最后得到一个结果,当然这么口胡谁都会,那么我们就来看看搜索当中的一个大部分: BFS(广度优先 ...

  3. 数据库MySQL——安装

    MySQL 安装 Mysql安装: 1.通过二进制的方式安装 二进制安装方式中,包括rpm版本以及glibc版本. rpm版本就是在特定linux版本下编译的,如果你的linux版本匹配,就可以安装; ...

  4. ubuntu18.04安装mysql

    ubuntu18.04中,默认情况下mysql默认包含在apt软件存储库中,要安装它只需要更新服务器上的包索引并安装默认包apt-get. 1.安装mysql sudo apt-get update ...

  5. （转）ReentrantLock实现原理及源码分析

    背景:ReetrantLock底层是基于AQS实现的(CAS+CHL),有公平和非公平两种区别. 这种底层机制,很有必要通过跟踪源码来进行分析. 参考 ReentrantLock实现原理及源码分析 源 ...

  6. Java基础 -- 嵌套类(非静态嵌套类、静态嵌套类)

    可以将一个类的定义放在另一个类的内部定义,这样的类就被称为嵌套类,包含嵌套类的类被称为外部类(outer class),也可以叫做封闭类. 嵌套类可以分为两种: 静态嵌套类(Static Nested ...

  7. blackbox_exporter介绍

    Blackbox Exporter是Prometheus社区提供的官方黑盒监控解决方案,其允许用户通过:HTTP.HTTPS.DNS.TCP以及ICMP的方式对网络进行探测. 1.安装部署 cd /u ...

  8. 转---Google Python编程风格指南

    为帮助读者能够将代码准确格式化,我们提供了针对 Vim的配置文件 .对于Emacs用户,保持默认设置即可. 背景 Python 是 Google主要的脚本语言.这本风格指南主要包含的是针对python ...

  9. webpack打包理解

    webpack打包理解(将所有依赖文件打包到一个文件中) 由于前端代码变得越来越多,越来越复杂, 纯粹脚本化的代码书写方式已经不能满足工程化得需求. 前端模块被抽象出来, 不仅仅包括js模块, 其它如 ...

  10. C#多线程处理

    创建多线程,并带参数! using System; using System.Collections; using System.Collections.Generic; using System.I ...