全部章节 >>>>
文章目录
一、v-for指令
1、v-for指令使用
示例：使用v-for显示员工信息列表
<!-- HTML代码: -->
<div id="app" style="margin:20px auto;width:600px">
<ul>
<li v-for="(item,index) in items" :key="index">
<a href="">{{ index }}.{{ item }}</a>
</li>
</ul>
</div>
// JavaScript代码:
var vm = new Vue({
el: "#app",
data: {
items:["部门管理","员工管理","职务管理"]
}
})
示例：使用v-for指令显示单个员工信息
<!-- HTML代码: -->
<div id="app" style="margin:20px auto;width:600px">
<div v-for="(value,name,index) in emp">
{{ index }}.{{ name }} : {{ value }}
</div>
</div>
// JavaScript代码:
var vm = new Vue({
el: "#app",
data: {
emp:{
user:"赵五",
age:20,
job:"项目经理"
}
}
});
说明：
建议尽可能在使用v-for时提供`key属性`，除非遍历输出的DOM内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
注意：
不要使用对象或数组之类的非基本类型值作为v-for的key。请用字符串或数值类型的值。
2、实践练习（待更新）
二、计算属性
1、计算属性创建和使用
-
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
例如{{ message.split('').reverse().join('') }}
-
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量
message的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。 -
所以，对于任何复杂逻辑，都应当使用
计算属性。 -
在计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，最终会返回结果。
-
计算属性还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
-
所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。
示例：使用计算属性实现将英文语句按字母翻转
<!-- HTML代码: -->
<div id="app" style="margin:20px auto;width:600px">
<p>原字符串: "{{ message }}"</p>
<p>字符串转换后: "{{ reversedMessage }}"</p>
</div>
// JavaScript代码:
var vm = new Vue({
el: "#app",
data: {
message:"Failure is the mother of success."
},
computed: {
reversedMessage:function(){
return this.message.split("").reverse().join("");
}
}
})
示例：使用计算属性实现对字符串数组根据关键字查找功能
<!-- HTML代码: -->
<div id="app" style="margin:20px auto;width:600px">
<span>字符串关键字：</span>
<input type="text" placeholder="请输入关键字..." v-model="wordKey"/>
<ul>
<li v-for="item in findItems" :key="item">
{{ item }}
</li>
</ul>
</div>
// JavaScript代码:
...
el: "#app",
data: {
items:[...],
wordKey:""
},
computed: {
findItems:function(){
var _this=this;
//根据条件过滤数组中的数据
return _this.items.filter(function(val){
return val.indexOf(_this.wordKey)!=-1;
})
}
2、实践练习（待更新）
三、侦听属性
1、侦听属性创建和使用
- Vue提供了一种更通用的方式来观察和响应Vue实例上的
数据变动：侦听属性。当有一些数据需要随着其他数据变动而变动时，就可以使用侦听属性watch。 - watch是一个对象，其中watch对象的属性是需要侦听的目标，一般是
data中的某个数据项，而watch对象的属性值是一个函数，是被侦听的数据项发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是更新后的值。
示例：使用watch侦听添加商品信息输入框，根据值的变化显示不同提示效果
<!-- HTML代码: -->
<div id="app" style="margin:20px auto;width:600px">
<div class="prod">
<h1>商品信息</h1>
<p>
<p><label for="title">商品标题：</label>
<input type="text" v-model="title" />
<span :class="{ warn:!titleValid}">商品标题输入不能为空！</span></p>
<p><label for="price">商品单价：</label>
…</p>
<p><label for="amount">商品数量：</label>
…</p>
<p>{{ title }}》商品购买了{{ amount }}本,总计¥{{ total }}元</p></p>
</div>
</div>
// JavaScript代码:
var vm = new Vue({
el: "#app",
data: {
title:"JavaScript权威指南",
price:"40",
amount:"10",
total:"0",
titleValid:true,
priceValid:true,
amountValid:true
},
watch: {
title: function(newVal, oldVal){ … },
price: function(newVal, oldVal){ … },
amount: function(newVal, oldVal){ … },
},
})
示例：修改上一个示例的watch中的price()如下代码
// JavaScript代码:
price:{
// 之前写的watch的函数，其实默认写的就是handler
handler:function(newVal, oldVal){
…
},
// 代表如果在wacth里声明了price之后，就会立即先去执行里面的handler方法
immediate:true
}
2、实践练习（待更新）
四、综合案例
1、商品信息管理
// JavaScript代码:
var vm = new Vue({
el: "#app",
data: {
...省略代码...
},
methods: {
createProd: function () {
this.products.push(this.newProduct);
// 添加完newProduct对象后，重置newProduct对象
this.newProduct = {
name: "",
price: 0,
category: "手机/数码",
}
}
}
});
<!-- HTML代码: -->
<table>
<thead>
<tr>
<th>名称</th>
<th>价格</th>
<th>类别</th>
<th>删除</th>
</tr>
</thead>
<tbody>
<tr v-for="(prod,index) in findProdList">
<td>{{ prod.name }}</td>
<td>{{ prod.price | priceFormat }}</td>
<td>{{ prod.category }}</td>
<td class="“text-center”"><button @click="deleteProd(index)">删除</button></td>
</tr>
</tbody>
</table>
// JavaScript代码:
var vm = new Vue({
el: "#app",
data: {
...省略代码...
},
// 为了正确显示价格采用过滤器进行格式处理
methods: {
...省略代码...
},
filters: {
priceFormat: function (val) { // 创建价格格式过滤器
return "￥" + parseInt(val).toFixed(2) + "元";
}
}
});
<!-- HTML代码: -->
<div id="app">
...省略代码...
<div class="form-group">
<label>查询关键字:</label>
<input type="text" v-model="key" placeholder="请输入查询关键字...." />
</div>
...省略代码...
</div>
// JavaScript代码:
computed: {
findProdList:function(){
var _this=this;
return _this.products.filter(function(prod){
return prod.name.indexOf(_this.key)!=-1;
});
}
}
// JavaScript代码:
var vm = new Vue({
el: “#app”,
data: {...省略代码...},
filters: {...省略代码...},
methods: {...省略代码...
//添加deleteProd()方法
deleteProd: function (index) {
if (confirm("删除当前商品信息吗？")) {
// 删除一个数组元素
this.products.splice(index, 1);
}
}
},
computed: {...省略代码...}
});
