Vue.js条件与列表渲染-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43278421/article/details/106979289

今天接着学指令

v-if 、v-else-if v-else
这个就是判断，和普通的类似

v-if和 v-show的区别是前者如果为false，是直接消失的，不存在，后者即便不显示，也是渲染完成的
所以要说真正的条件渲染，if才是

列表渲染指令
v-for

<li v-for="book in books">{{book.name}}</li>
...............
data:{
  book:[
     { name: 'xxx'},
     { name: 'yyy'},
     { name: 'zzz'}
  ]
}

这种for 然后元素 in 数组元素的形式之前也见过很多，也好理解吧
除了数组，其他的如果是属性也可以遍历读取

数组更新
Vue的核心是数据和视图的双向绑定
这点和AngularJS类似吧，我记得ng-model也可以实现数据的双向绑定
不过他这里是数据和视图
但我们在修改数组的时候，Vue会检测到数据变化，所以使用v-for渲染的视图也会立即更新，哦，他把v-for渲染的叫做视图，那和ng应该是差不多的

	<body>
		<div id="app">
			<ul>
				<template v-for="book in books">
					<li>书名：{{book.name}}</li>
					<li>作者：{{book.author}}</li>
				</template>
			</ul>
		</div>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					books:[
						{
							name:'a',
							author:'A'
						},
						{
							name:'b',
							author:'B'
						},
					    {
					    	name:'c',
					    	author:'C'
					    },
					]
				}
			});
			app.books = app.books.filter(function(item){
				return item.name.match(/a/);
			});
		</script>
	</body>

这是一个filter的过滤功能
除此之外还有一些其他的方法函数用来更新数组
push，pop，shift，sort…

方法和事件

有个 v-on：click 的方法是用来绑定button的
也可以使用 @click 的形式绑定，这两个是等价的

修饰符
加载@click后面的，有以下这些：
stop、prevent、capture（捕获模式）、self(只发生在自身）、once（只触发1次）
使用方法如下：

<a @click.stop = "handle"></a>

阻止单击事件冒泡

<form @submit.prevent = "handle"></form>

表示提交事件不再串联

这个修饰符是可以串联的，就是像下面一样

<a @click.stop.prevent = "handle" ></a>

VueJS（三）