前面几期整理，详见博客
现在来续写第三期—Vue.js的条件渲染、列表渲染、事件处理
一、条件渲染
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
1、v-if、v-else、v-else-if
用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
2、用 key 管理可复用的元素
Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”，只需添加一个具有唯一值的 key 属性即可：
<template v-if="loginType === 'username'">
<label>UserName </label>
<input type="text" placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email </label>
<input type="text" placeholder="Enter your email address" key="email-input">
</template>
<input v-on:click="btn" type="button" value="切换">渲染效果
扫描二维码关注公众号，回复：
11132027 查看本文章
为loginType赋初始值，编写btn方法
data: {
loginType: 'username'
},
methods: {
btn: function(){
if(this.loginType === "username"){
this.loginType = "email"
}else{
this.loginType = 'username'
}
}
}观察当点击切换按钮时，placeholder的值
点击切换后
可见两个input里面的元素值是完全独立开来的
3、v-show
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
<h1 v-show="ok">Hello!</h1>不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
注意，v-show 不支持 <template> 元素，也不支持 v-else。
代码演练
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
<h1 v-show="ok">Hello!</h1>
<template v-if="loginType === 'username'">
<label>UserName </label>
<input type="text" placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email </label>
<input type="text" placeholder="Enter your email address" key="email-input">
</template>
<input v-on:click="btn" type="button" value="切换">
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
type : "B",
ok : true,
loginType: 'username'
},
methods: {
btn: function(){
if(this.loginType === "username"){
this.loginType = "email"
}else{
this.loginType = 'username'
}
}
}
});
</script>
<style type="text/css">
</style>
</body>
</html>
运行结果
二、列表渲染
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
代码演练（用法都写着注释上了）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item,index in items" :key="index">
{{index}}{{ item.message }} <!-- index可以插入当前项的索引 -->
</li>
</ul>
<ul>
<li v-for="value, key in object"> <!-- v-for也可以插入一个对象 -->
{{key}} : {{ value }}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
items : [
{ message: 'Foo' }, /* 渲染message值为Foo的li标签 */
{ message: 'Bar' } /* 渲染message值为Bar的li标签 */
],
object: { /* 对象的初始化并赋值 */
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
});
</script>
</body>
</html>
运行结果
三、事件处理
1、监听事件
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
示例：
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
counter的值会随着点击的次数增加而叠加
2、事件的处理
我们用这一个实例来说明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div id="example-1">
<button v-on:click="counter += 1"> 数值 : {{ counter }} </button><br /> <!-- counter的值会随着点击次数的增加而叠加 -->
<button v-on:click="greet('你好', $event)">Greet</button> <!-- 点击事件greet方法,传入参数为字符串"你好"和获取当前event的值 -->
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
counter: 0, /* 初始化赋值counter */
},
methods:{ /* 重写方法greet,参数类型为str和e的值 */
greet : function (str, e) {
alert(str); /* 弹窗 */
console.log(e); /* 控制台打印e的值 */
}
}
});
</script>
<style type="text/css">
</style>
</body>
</html>
运行结果
可以看到弹窗出现，控制台打印出当前e对象的值
Vue.js支持event里面的大部分事件
详见 事件参考
3、键盘事件
Vue的键盘事件：@keydown：按下、@keypress：按住、@keyup：抬起
以下分别是几种不同的键盘按键提交方式
methods:{
onEnter(e){
if(e.keyCode==13){
console.log("原生js-按下回车");
}
},
newOnEnter(){
console.log("Vue-按下回车")
},
onKeyAUp(){
console.log("抬起了按键A")
}
} <!--原生js方式-->
<input type="text" placeholder="onEnter" @keydown="onEnter($event)"/> <br />
<!--vue提供方式-->
<input type="text" placeholder="newOnEnter 13" @keydown.13="newOnEnter($event)"/> <br />
<!--vue提供内置按键别名方式-->
<input type="text" placeholder="newOnEnter enter" @keydown.enter="newOnEnter($event)"/><br />
<!--其它按键别名-->
<input type="text" placeholder="keyup onKeyAUp" @keyup.a="onKeyAUp"/><br />效果如下
下期续写vue的基本组件~~~
原创文章 7
获赞 15
访问量 2005