VUE：条件渲染和列表渲染
条件渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.条件渲染指令
v-if v-else 移除标签
v-show 通过样式隐藏
2.比较 v-if 与v-show
如果需要频繁切换 v-show 较好
--> <div id="app">
<p v-if="ok">成功了</p>
<p v-else>失败了</p> <p v-show="ok">表白成功了</p>
<p v-show="!ok">表白失败了</p>
<button @click="ok=!ok">切换</button>
</div> <script type="text/javascript" src="../js/vue.js" ></script>
<script>
new Vue({
el:'#app',
data:{
ok:false
}
})
</script>
</body>
</html>
列表渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.列表显示
数组：v-for / index
对象：v-for / key
2.列表的更新显示
删除item
替换item
--> <div id="demo">
<h2>测试：v-for 遍历数组</h2>
<ul>
<!-- p:遍历的个体 index：下标-->
<li v-for="(p,index) in persons" :key="index">
{{index}}----{{p.name}}----{{p.age}}
----<button @click="deleteP(index)">删除</button>
----<button @click="updateP(index,{name:'Cat',age:20})">更新</button>
</li>
</ul>
<h2>测试：v-for 遍历对象</h2>
<ul>
<li v-for="(value,key) in persons[1]" :key="key">
{{value}}----{{key}}
</li>
</ul>
</div> <script type="text/javascript" src="../js/vue.js" ></script>
<script>
//vue本身只是监视了的改变，没有监视数组内部数据的改变
//vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，更新界面）
//即vue包含一组观察数组的变异方法，所以他们也将会触发视图更新：
//push() pop() shift()
//unshift() splice() sort() reverse()
//实现思路：重写-更新
new Vue({
el:"#demo",
data:{
persons:[
{name:'Tom',age:18},
{name:'Taosir',age:22},
{name:'moer',age:20},
{name:'Bom',age:24},
]
},
methods:{
deleteP(index){
//删除persons中指定的index的p this.persons.splice(index,1);
},
updateP(index,newP){
//并没有改变persons本身，数据内部发生了变化，但并没有调用变异方法，vue不会更新
//this.persons[index]=newP; //没有指向persons本身，错！
this.persons.splice(index,1,newP);//删除一个，然后添加
}
}
})
</script>
</body>
</html>
VUE：条件渲染和列表渲染的更多相关文章
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- Vue学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染
Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style ...
- react 入坑笔记（五） - 条件渲染和列表渲染
条件渲染和列表渲染 一.条件渲染 条件渲染较简单,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 贴一个小栗子: funct ...
- Vue.js学习 Item7 -- 条件渲染与列表渲染
v-if 在字符串模板中,如 Handlebars,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1 ...
- angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...
- vue的条件渲染和列表渲染介绍
一.条件渲染 1.v-if语句 <div v-if="seen">hahahah</div> <!-- v-if插入或者删除元素的指令 --> ...
- vue 条件渲染与列表渲染
本文是对官方文档的整理 因为 v-if 是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v ...
- vue class与style绑定、条件渲染、列表渲染
列表渲染 根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法 ...
- vue学习笔记(五)条件渲染和列表渲染
前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...
随机推荐
- redis_4 主从模式
配置主服务器: 进入 redis 配置文件redis.conf. 修改 bind 127.0.0.1 为 bind 0.0.0.0 关闭防火墙,只有root用户能操作 .开启 命令为:ufw enab ...
- Jquery学习总结（5）——jQuery选择器
1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签</p> <p id="not">这 ...
- Cookie 工具类
一.导入 jar 包 <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet ...
- 循环时自动打开url
'systemutil.Run "C:\Program Files (x86)\HP\QuickTest Professional\samples\flight\app\flight4a.e ...
- 参数化取值策略Unique
Unique:主要是强调取值的唯一性,如果到最后没有该值了,LR提供了其他解决方案,如图所示: 此处的下拉列表中提供了三种方式,具体如下: About Vuser,当取值次数超过参数的行数时,忽略脚本 ...
- 关于C++构造函数一二
关于构造函数的调用顺序: 1.继承关系 2.从属关系 3.static声明的从属关系 关于拷贝构造函数的声明: classname(const classname & rhs) #includ ...
- http协议区分头信息和正文
http协议中的头信息和正文是採用空行分开,什么是空行呢?简单来说,就是\r\n\r\n. 所以将server返回的数据用\r\n\r\n分开后的结果,一个是头信息.一个是正文信息. C#的代码例如以 ...
- 去哪网实习总结：如何配置数据库连接（JavaWeb）
本来是以做数据挖掘的目的进去哪网的,结构却成了系统开发.. . 只是还是比較认真的做了三个月,老师非常认同我的工作态度和成果. .. 实习立即就要结束了.总结一下几点之前没有注意过的变成习惯和问题,分 ...
- SSM框架——具体整合教程（Spring+SpringMVC+MyBatis）
使用SSM(Spring.SpringMVC和Mybatis)已经有三个多月了.项目在技术上已经没有什么难点了,基于现有的技术就能够实现想要的功能.当然肯定有非常多能够改进的地方.之前没有记录SSM整 ...
- 树莓派与window 10组成的物联网核心：让人失望
去年春天,微软公布了自己的window系统与物联网系统的方案,该方案使用树莓派和window 10组成物联网的核心.树莓派是一个与window全然不同的执行在ARM构架下的系统. 是的,也许微软决心离 ...