Vue实例学习过程中碰到的小问题
在使用插值表达式{{ }}取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实例学习过程中碰到的小问题的更多相关文章
- JS学习过程中碰到的小问题
使用循环语句查找通讯录 //Setup var contacts = [ { "firstName": "Akira", "lastName" ...
- vue使用过程中的一些小技巧
这些也是自己平时项目中遇到过的一些问题,看到有人整理了出来,也就转载保存一下 文章内容总结: 组件style的scoped Vue 数组/对象更新 视图不更新 vue filters 过滤器的使用 列 ...
- 转 Android学习笔记： 学习过程中碰到的一些问题及解决方法
在学习Android开发的过程中遇到了不少的问题,所幸的是最终经过上网查询都得到了解决.现在将我在学习Android开发过程中遇到的一些问题及解决的方法整理如下. 1.R.java不能实时更新 问题描 ...
- 记录python学习过程中的一些小心得
1.python中一切皆对象,内置数据结构也是对象.处理一个对象就是利用它带有的方法和属性,对该对象进行处理,一步步达到我们想要的结果. 2.编程时,先构思好我们处理的对象是什么,具有哪些属性和方法, ...
- 使用vue在开发中的一些小问题--使用vue-cli起的服务器无法在局域网访问
2.使用vue-cli起的服务器无法在局域网访问 这个很简单,在package.json文件中的js启动项配置中增加--host 0.0.0.0 注意是--host而不是-host,此时如果有--op ...
- 使用vue在开发中的一些小问题--利用环境变量做一些常量的定义
1.集中式的环境配置: (1)使用vue-cli基本上不用去处理什么,只需要在config文件夹下的文件中配置写既可: module.exports = merge(prodEnv, { NODE_E ...
- Matlab学习过程中的一些小问题
1.Overload your functions by having variable number of input and output argumernt.Not only can we ov ...
- Vue项目过程中遇到的小问题
1.给router-link添加点击事件 <router-link to="" @click.native=""></router-link& ...
- Vue.js-07：第七章 - Vue 实例的生命周期
一.前言 在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...
随机推荐
- delphi Ctrl+鼠标左键或者Find Declaration不能定位到源文件
在Delphi代码编辑器中使用Ctrl+鼠标左键可跳转到鼠标下的类所在的定义处,但今天发现一个奇怪的问题,EhLib组件的类无法跳转(包括uses中的pas文件),重新安装也是如此,后来经过验证,发现 ...
- SpringBoot配置mybatis
一直都说SpringBoot是零配置,当然,真正实现零配置是不可能的,但是在配置mybatis这里真的是太简单了,哈哈,下面我们一起看一下. 1.先导入基于SpringBoot的mybatis依赖包 ...
- Hadoop系列（二）：Hadoop单节点部署
环境:CentOS 7 JDK: 1.7.0_80 hadoop:2.8.5 hadoop(192.168.56.101) 配置基础环境 1. 测试环境可以直接关闭selinux和防火墙 2. 主机添 ...
- 快速沃尔什变换(FWT)及K进制异或卷积&快速子集变换(FST)讲解
前言: $FWT$是用来处理位运算(异或.与.或)卷积的一种变换.位运算卷积是什么?形如$f[i]=\sum\limits_{j\oplus k==i}^{ }g[j]*h[k]$的卷积形式(其中$\ ...
- 「洛谷3870」「TJOI2009」开关【线段树】
题目链接 [洛谷] 题解 来做一下水题来掩饰ZJOI2019考炸的心情QwQ. 很明显可以线段树. 维护两个值,\(Lazy\)懒标记表示当前区间是否需要翻转,\(s\)表示区间还有多少灯是亮着的. ...
- 堆以及一些用法 QWQ这是写得最认真的板子题
最近一直在学图论,然后吧,由于学的东西实在是太多太杂了,加上蒟蒻本蒻又经常颓,所以落了好多好多板子题的整理没写啊嘤嘤嘤,不过把这些东西学的差不多了,再一块写个整理,其实感觉还不错?????也算是很神奇 ...
- 详解最大似然估计（MLE）、最大后验概率估计（MAP），以及贝叶斯公式的理解
转载声明:本文为转载文章,发表于nebulaf91的csdn博客.欢迎转载,但请务必保留本信息,注明文章出处. 原文作者: nebulaf91 原文原始地址:http://blog.csdn.net/ ...
- Eclipse - 安装lombok后注解无效
安装 lombok lombok 的安装过程挺简单的,网上已经有很多相关的博客,这里就不在多说了,可以参考这篇:eclipse集成lombok注解不起作用 但是我按照网上的方式安装之后,注解一直不起作 ...
- Ubuntu16.04的图形化界面无法启动问题
昨晚在 Ubuntu 下试图安装笔记本触控板的驱动的时候,突然 Ubuntu 的图形化界面不见了,尝试了 Ctrl + Alt + F1.F2.F3...无果,又在一些博客的指导下尝试在命令行使用 s ...
- GDB调试技巧：总结篇
目录 一 写在开头 1.1 本文内容 二 学习资料 三 常用命令 四 调试技巧 注:原创不易,转载请务必注明原作者和出处,感谢支持! 一 写在开头 1.1 本文内容 总结GDB调试的一些常用命令和调试 ...