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

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

var car = { id:this.id , name:this.name , ctime:new Date()},

//万恶的逗号
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

         <meta http-equiv="X-UA-Compatible" content="ie=edge"/>

         <title>Document</title>

         <script src="lib/vue-2.4.0.js"></script>

         <link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7.css"/>

         <!-- 需要用到JQuery吗? -->

         <!-- JQuery本质是使用js进行查询,是对dom的操作,而在Vue中尽量避免对dom进行操作 -->

     </head>

     <body>

         <div id="app">

             <div class="panel panel-primary">

                 <div class="panel-heading">

                     <h3 class="panel-title">添加品牌</h3>

                 </div>

                 <div class="panel-body form-inline">

                     <label>

                         ID:

                         <input type="text" class="form-control" v-model="id"/>

                         <!-- 这里的id是data中的id,不是list中的id -->

                     </label>

                     <label>

                         Name:

                         <input type="text" class="form-control" v-model="name"/>

                         <!-- 这里的name是data中的name,不是list中的name -->

                     </label>

                     <!-- 在Vue中使用事件绑定机制，为元素制定处理函数时，如果加了小括号，就可以给函数传参了 -->

                     <input type="button" value="添加" class="btn btn-primary" @click="add()"/>

                 </div>

             </div>

             <table class="table table-bordered table-hover table-striped">

                 <thead>

                     <tr>

                         <th>Id</th>

                         <th>Name</th>

                         <th>Ctime</th>

                         <th>Operation</th>

                     </tr>

                 </thead>

                 <tbody>

                     <tr v-for="item in list" :key="item.id">

                         <td v-text="item.id"></td>

                         <td v-text="item.name"></td>

                         <td v-text="item.ctime"></td>

                         <td>

                             <a href="">删除</a>

                         </td>

                     </tr>

                 </tbody>

             </table>

         </div>

         <script type="text/javascript">

             var vm = new Vue({

                 el:'#app',

                 data:{

                     id:'',

                     name:'',

                     list:[

                         { id:1 , name: '奔驰' , ctime: new Date() },

                         { id:2 , name: '宝马' , ctime: new Date() },

                     ]

                 },

                 methods:{

                      add(){    //添加的方法

                          // 分析:

                          // 1.获取到id和name,直接从data上获取

                          // 2.组织出一个对象

                          // 3.把这个对象,调用数组的相关方法,添加到当前data上的list中

                          // 4.注意:在Vue中已经实现了数据的双向绑定,每当我们修改了data中的数据.Vue会监听到数据的改动,自动把最新的数据应用到页面上

                          var car = { id:this.id , name:this.name , ctime:new Date()}

                          this.list.push(car)

                          this.id = this.name = ''

                      }

                 }

             })

         </script>

     </body>

 </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. 深度解读Tomcat中的NIO模型（转载）

    转自https://www.jianshu.com/p/76ff17bc6dea 一.I/O复用模型解读 Tomcat的NIO是基于I/O复用来实现的.对这点一定要清楚,不然我们的讨论就不在一个逻辑线 ...

  2. Base 64 & decodeURIComponent

    Base 64 & decodeURIComponent js btoa() & atob() let obj = [{"key":"q",&q ...

  3. NABCD--团队项目1

    N: 1.学校中有很多学生是外省的,然后不知道附近有什么地方周末可以去玩. 2.学校中学生有很多用不到的东西但是联系不到合适的买家. A: 我们可以做一个软件,通过学号注册登陆软件,这样可以防止有人去 ...

  4. .Net Core 环境下构建强大且易用的规则引擎

    本文源码: https://github.com/jonechenug/ZHS.Nrules.Sample 1. 引言 1.1 为什么需要规则引擎 在业务的早期时代,也许使用硬编码或者逻辑判断就可以满 ...

  5. 完全理解 Python 迭代对象、迭代器、生成器（转）

    完全理解 Python 迭代对象.迭代器.生成器 本文源自RQ作者的一篇博文,原文是Iterables vs. Iterators vs. Generators » nvie.com,俺写的这篇文章是 ...

  6. hihoCoder #1954 : 压缩树(虚树)

    题意 有一棵 \(n\) 个节点且以 \(1\) 为根的树,把它复制成 \(m\) 个版本,有 \(q\) 次操作,每次对 \([l, r]\) 这些版本的 \(v\) 节点到根的路径收缩起来. 收缩 ...

  7. 一文入门HTML5

    1.HTML5 上节回顾:一文读懂ES6(附PY3对比) | 一文入门NodeJS 演示demo:https://github.com/lotapp/BaseCode/tree/master/java ...

  8. functools模块中partial的使用

    一.简介 functools.partial(func,* args,**关键字) 返回一个新的部分对象,当被调用时,其行为类似于使用位置参数args 和关键字参数关键字调用的func.如果为调用提供 ...

  9. CMakeList.txt（3）： 一个cmake实例

    介绍一个比较实用的例子,即包含生成静态库又包含引入外部头文件和链接库的cmake demo. 先按照工程规范建立工程目录,并编写代码,以下面的工程目录为例进行解释这个例子,工程的目录结构为: 1. 编 ...

  10. (一)V4L2学习流程

    title: V4L2学习流程 date: 2019/4/23 18:00:00 toc: true --- V4L2学习流程 参考资料 关键资料,插图让人一下子就理解了 Linux摄像头驱动1--v ...