目录
3.1v-for指令
现在很多的软件项目都有着对集合和数组显示的需求，在Vue
用v-for指令来实现渲染列表的功能， 并且Vue还提供了计算属性
贞听属性来实现复杂业务处理。
1.使用v-for指令实现列表渲染
2.在computed选项中创建和使用计算属性
3.使用计算属性实现列表查询功能
4.在watch选项中创建和使用侦听属性
5.综合案例商品管理系统实现Vue常用指令的综合应用。
v- for指令的使用
v-for指令是基于一个数组来重复渲染的元素，通常用于显示列
表和表格数据。v-for指令需要使用“item initems" 形式的特殊语法
其中items是源数据数组，而item则是被迭代的数组元素的别名。
在v-for指令中，开发者可以访问父作用域的属性。v-for指令还
支持一个可选的第二个参数， 即当前项的索引。 为了给Vue-个提示
以便它能跟踪每一行的数据，从而重用和重新排序现有元素，v-for
指令需要为每项提供一 个唯一key属性。
v-for指令还可以遍历一个对象的属性，其中v-for指令可以提供
第二个参数为property名称(也就是键名)，还可以用第三个参数
为索引
<div id="app">
<ul>
<li v-for="(item,index) in items" :key="index">
<a href="#">{{index}}.{{item}}</a>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [
"软件1905",
"软件1906",
"软件1907",
"软件1908",
"软件1909",
"软件1910"
]
}
});
</script> <div id="app">
<ul>
<li v-for="(value,key,index) in emp" :key="index">
<a href="#">{{index}}：{{key}}：{{value}}</a>
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data:{
emp:{
user: "赵五",
age: 20,
job:"项目经理"
}
}
});
</script>3.2计算属性
计算属性的创建和使用
除了在HTML中绑定表达式或者利用过滤器外，Vue.js还提供了
计算属性这种方法，避免在模板中加入过重的业务逻辑，保证模板的
结构清晰和可维护性。
在计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等
最终会返回结果。计算属性还可以依赖多个Vue实例的数据，只要其
中任一数据发生变化，计算属性就会重新执行，视图也会更新。
<div id="app">
<p>转换前:{{message}}</p>
<p>转换后:{{reversedMessage}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data:{
message: "我是一根狗尾草~"
},
computed:{
reversedMessage: function () {
return this.message.split("").reverse().join("");
}
}
});
</script>一个计算属性都包含一个getter()方法和一个setter()方法，Vue
知道vm.reversedMessage依赖于vm.message,因此当vm.message
发生改变时，所有依赖vm.reversedMessage的绑定也会更新，而且
以声明的方式创建了这种依赖关系:计算属性的getter()方法是没有
副作用的，这使它更易于测试和理解。
写一个简单的搜索
<div id="app">
<span>输入关键字：</span>
<input type="text" v-model="wordKey"/>
<ul>
<li v-for="item in findItems" :key="item">
{{item}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
wordKey: "",
items: [
"Hello",
"Car",
"one",
"two",
"1",
"2",
"3"
]
},
computed: {
findItems: function () {
var _this = this;//这里是获取vm对象
return this.items.filter(function (val) {
return val.indexOf(_this.wordKey) != -1;
})//filter是Vue第一章的过滤器，val指的item对象
}
}
});
</script>3.3侦听属性
侦听属性的创建和使用
Vue提供了-种更通用的方式来观察和响应Vue实例上的数据变
动
侦听属性。当有一 -些数据需要随着其他数据的变动而变动时,
就可以使用侦听属性watch。
watch是一个对象，其中watch对象的属性是需要侦听的目标，
一般是data中的某 个数据项，而watch对象的属性值是一个函数，是
当被侦听的数据项发生变化时需要执行的函数。
这个函数有两个形参:第一一个是当前值;第二个是更新后的值。
下面是watch对象的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#app {
margin: 20px auto;
width: 600px;
}
.warn {
color: red;
}
.pord {
width: 500px;
box-shadow: 0 0 14px #888888;
padding: 10px;
border-radius: 10px;
}
</style>
<body>
<div id="app">
<div class="prod">
<h1>商品信息</h1>
<p>
<p>
<lable for="title" 商品标题></lable>
<input type="text" id="title" v-model="title" />
<span :class="{warn:!titleValid}">商品标题输入不能为空！</span>
</p>
<p>
<lable for="price" 商品价格></lable>
<input type="text" id="price" v-model="price" />
<span :class="{warn:!priceValid}">商品价格输入不能为空！</span>
</p>
<p>
<lable for="amount" 商品数量></lable>
<input type="text" id="amount" v-model="amount" />
<span :class="{warn:!amountValid}">商品数量输入不能为空！</span>
</p>
<p>
{{title}}商品购买了{{amount}}本，共¥{{total}}元
</p>
</p>
</div>
</div>
<script src="/js/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
title: "javascript",
price: "100",
amount: "10",
total: 0,
titleValid: true,
priceValid: true,
amountValid: true
},
watch: {
title: function(newVal, oldVal) {
if (newVal != "") {
this.titleValid = true;
} else {
this.titleValid = false;
}
},
price: function(newVal, oldVal) {
if (price != "") {
this.priceValid = true;
} else {
this.priceValid = false;
}
this.total = parseInt(newVal) * parseInt(this.amount);
},
amount: function(newVal, oldVal) {
if (newVal != "") {
this.amountValid = true;
} else {
this.amountValid = false;
}
this.total = parseInt(newVal) * parseInt(this.amount);
}
}
})
</script>
</body>
</html>
侦听属性的创建和使用
Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动——侦听属性。
当有一些数据需要随着其他数据的变动而变动时，就可以使用侦听属性watch。
如果想要一开始让最初绑定的时候就执行，就需要在watch中使用handler()方法和immediate属性:
( 1 ) handler()方法:其值是一个回调函数，即监听到变化时应该执行的函数
(2 ) immediate属性:其值是true或false，确认是否以当前初始值执行handler的函数。
3.4综合按案例
下面结合Vue的基础知识来实现商品信息的管理功能，其中包含以下功能:
(1）添加商品信息。
(2）显示全部商品信息列表。
(3）根据商品标题查询商品信息列表。(4）删除商品信息。
案例下载地址(0积分):(30条消息) VsCodeVue实现增删改查-互联网文档类资源-CSDN文库
https://download.csdn.net/download/weixin_55959870/74736542
vue实现了增删改查
<style>
#app {
margin: 20px auto;
width: 600px;
}
.warn {
color: red;
}
.pord {
width: 500px;
box-shadow: 0 0 14px #888888;
padding: 10px;
border-radius: 10px;
}
</style>
<body>
<div id="app">
<fieldset>
<legend>
新商品信息
</legend>
<div>
<label>名称：</label>
<input type="text" v-model="newProduct.name">
</div>
<div>
<label>价格</label>
<input type="text" v-model="newProduct.price">
</div>
<div>
<label>类别</label>
<select v-model="newProduct.category">
<option v-for="cate in categories" v-bind:vlaue="cate">{{cate}}</option>
</select>
</div>
<div>
<label></label>
<button @click="createProd">添加</button>
</div>
<div>
<label>查询关键字：</label>
<input type="text" v-model="key">
</div>
<table>
<tr>
<td>名称</td>
<td>价格</td>
<td>类别</td>
<td>删除</td>
</tr>
<tr v-for="(prod,index) in findProdList">
<td>{{prod.name}}</td>
<td>{{prod.price}}</td>
<td>{{prod.category}}</td>
<td><button @click="deleteProd(index)">删除</button></td>
</tr>
</table>
</fieldset>
</div>
<script src="/js/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
key: "",
newProduct: {
name: "",
price: 0,
category: "手机/数码"
},
categories: [
"手机/数码", "电脑/办公", "家具/家居", "男装女装"
],
products: [{
name: "男士卫衣",
price: 100,
category: "男装/女装"
}]
},
methods: {
createProd: function() {
this.products.push(this.newProduct);
this.newProduct = {
name: "",
price: 0,
category: "手机/数码"
}
},
deleteProd: function(index) {
if (confirm("删除当前商品信息吗？")) {
this.products.splice(index, 1)
}
}
},
computed: {
findProdList: function() {
var _this = this;
return _this.products.filter(function(prod) {
return prod.name.indexOf(_this.key) != -1;
})
}
}
});
</script>
4913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
