Vue笔记（二）

最新推荐文章于 2024-09-30 11:04:46 发布
最新推荐文章于 2024-09-30 11:04:46 发布
阅读量121 收藏 1
点赞数
文章标签： vue.js javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qi__lu/article/details/120725838
版权

跑马灯效果

<div id="app0">
	<button @click="go()">走起来</button>
	<button @click="stop()">停下来</button>
	<p>{{msg}}</p>
</div>

const vm = new Vue({
	el:'#app0',
	data:{
		msg:'走起来呀走起来，停停停！！',
		intervalId:null,  //在data上定义定时器id
	},
	methods:{
		go(){
			if(this.intervalId != null ) return;
			this.intervalId = setInterval( () => {
				//先获得 第一个字符，注意用substring， 不改变原来的字符串
				var start = this.msg.substring(0, 1)
				//获得 除了第一个字符以外，剩下的所有的字符串
				var end = this.msg.substring(1)
				//将第一个字符start 添加到字符串end 的后面
				this.msg = end + start
			},400)
			//subtring(beginIndex, endIndex)方法返回字符串的子字符串  
			//beginIndex:起始索引（包括）, 索引从 0 开始。
			//endIndex:结束索引（不包括）
			
			//this 指向问题：在ES6中，箭头函数内部的this与箭头函数外部的this指向是一样的
			//也可以用普通匿名函数：function(){}，只不过在这个函数外边，先重新定义一下this：var _this=this，在函数体内部，把this全部换成_this，结果是一样的。
		},
		stop(){
			clearInterval(this.intervalId);
			//每当清除了定时器之后，要重新把intervalId设置为null。
			this.intervalId = null
		},
	},

打开的效果如下图：在这里插入图片描述
点击【走起来】按钮以后，下边的文字就会开始走动，过一段时间，点击【停下来】按钮，就会停止，再次点击【走起来】会在停止的基础上接着走起来。在这里插入图片描述

点击那个，那个的文字变成红色

可以应用在导航切换等地方

<style>
	.active{ color:red; }
</style>

<div id="app1">
	<ul>
    	<li :class="{active:currentIndex == index}" 
    		@click="btnClick2(index)"  
    		v-for="(item,index) in movies">
    		{{index}} -- {{item}}
    	</li>
    </ul>
</div>

var vm=new Vue({
	el:'#app1',
	data:{
		movies:['海王','泰坦尼克号','速度与激情','花木兰','我和我的祖国','大鱼海棠'],
		currentIndex:0,    //数字为下标，如果是null就表示默认的没有选择任何一个。
	},
	methods:{
		btnClick2 (index){ this.currentIndex = index; },
	},
})

默认的打开以后，效果如下图：在这里插入图片描述

品牌案例，添加新的品牌，删除，筛选

添加和删除比较容易，添加用push，删除用splice就可以实现，下面是添加和删除的案例

<!--引入bootstrap.css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<div id="app2">
	<div class="table-box">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">添加品牌</h3>
			</div>
			<div class="panel-body form-inline">
				<label>Id:<input type="text" class="form-control" v-model="id"/></label>
				<!-- @keyup.enter 键盘事件监听，监听回车键 -->
				<label>Name:<input type="text" class="form-control" v-model="name" @keyup.enter="addTr"/></label>
				<button @click="addTr" class="btn btn-primary">添加</button>
			</div>
		</div>
		<table class="table table-bordered table-hover table-striped">
			<thead>
				<tr>
					<th>Id</th>
					<th>品牌名称</th>
					<th>添加时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(value,index) in list">
					<td>{{value.id}}</td>
					<td v-text="value.name"></td>
					<td>{{value.ctime}}</td>
					<td><a @click="deleteTr(index)">删除</a></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

var vm=Vue({
	el:"#app2",
	data:{
		list:[
			{id:1,name:'宝马',ctime:new Date()},
			{id:2,name:'奔驰',ctime:new Date()}
		],
		id:'',
		name:'',
		keywords:'',  //Vue.js 调试工具 devtools
	},
	methods:{
		//添加  list.push()
		addTr(){
			var newTr = {
				id:this.id, 
				name:this.name, 
				ctime:new Date()
			};
			this.list.push(newTr);
			this.id = this.name = '';
		},
		//删除 list.splice(要删除项的下标，1)
		deleteTr(index){
			this.list.splice(index,1)
		},
	},
})

过滤：这里的例子主要是过滤表格中的“ 品牌名称 ”这一列。用 filter 和 includes 结合来进行过滤
        展示的列表是因为循环了list数组，根据内容才展示出来的。我们现在需要根据新的关键字，来确定下边展示的列表内容（过滤关键字），也就是这个列表的内容是不固定的。所以这时候，就不能循环list数组了，要循环一个新数组，并且在循环数组的div上要绑定一个key，这个key就是关键字。

<tr v-for="(value,index) in search(keywords)" :key='value.id'>... ...</tr>

        要根据关键字搜索，在表格列表上方添加一个输入框，输入需要搜索的关键字，并且对这个输入框进行一个双向绑定

<label>搜索名称关键字：<input type="text" class="form-control" v-model="keywords" /></label>

完整的代码：

<!--引入bootstrap.css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<div id="app2">
	<div class="table-box">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">添加品牌</h3>
			</div>
			<div class="panel-body form-inline">
				<label>Id:<input type="text" class="form-control" v-model="id"/></label>
				<!-- @keyup.enter 键盘事件监听，监听回车键 -->
				<label>Name:<input type="text" class="form-control" v-model="name" @keyup.enter="addTr"/></label>
				<button @click="addTr" class="btn btn-primary">添加</button>
				<label>搜索名称关键字：<input type="text" class="form-control" v-model="keywords" /></label>
			</div>
		</div>
		<table class="table table-bordered table-hover table-striped">
			<thead>
				<tr>
					<th>Id</th>
					<th>品牌名称</th>
					<th>添加时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<!--之前都是在list数组中循环渲染过来的，现在定义了一个search方法，
					同时把搜索的关键字，通过传参的形式传递给search方法
					search方法 通过for循环 过滤list数组上的数据，把符合的数据保存到一个新数组中，
					再重新进行渲染
				-->
				<tr v-for="(value,index) in search(keywords)" :key='value.id'>
					<td>{{value.id}}</td>
					<td v-text="value.name"></td>
					<td>{{value.ctime}}</td>
					<td><a @click="deleteTr(index)">删除</a></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

var vm=Vue({
	el:"#app2",
	data:{
		list:[
			{id:1,name:'宝马',ctime:new Date()},
			{id:2,name:'奔驰',ctime:new Date()}
		],
		id:'',
		name:'',
		keywords:'',  //Vue.js 调试工具 devtools
	},
	methods:{
		//添加  list.push()
		addTr(){
			var newTr = {
				id:this.id, 
				name:this.name, 
				ctime:new Date()
			};
			this.list.push(newTr);
			this.id = this.name = '';
		},
		//删除 list.splice(要删除项的下标，1)
		deleteTr(index){
			this.list.splice(index,1)
		},
		search(keywords){
			var newList = [];
			this.list.forEach(item => {
				if(item.name.indexOf(keywords) != -1){ //indexOf 查询复合字符串的下标
					newList.push(item);
				}
			})
			return newList
			
//			【注意】forEach    some    filter    findIndex  这些都属于数组新方法
//			都会对数组中的每一项，进行遍历，执行相关的操作。
			//ES6中新增的字符串方法，string.prototype.includes("要包含的字符串")，包含返回true，不包含返回false
//			var newList = this.list.filter(item => {
//				if(item.name.includes(keywords)){          //includes 判断是否包含指定字符串，空都包含
//					return item
//				}
//			})
//			return newList;
		},
	},
})

这里，时间的格式不是标准的时间格式，我们可以对时间进行一个调整，这里可以用vue里面提供的过滤器 filter 来进行格式化。
过滤器可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache插值和v-bind表达式。放在script表达式的尾部。
先写个 filter 例子：

<div id="app4">
	<!--每个过滤器可以有多个替换值，用逗号隔开。
		过滤器可以多次调用，用 “管道” 也就是 “ | ” 隔开就可以-->
	<p>{{msg | msgFormat("123","哈哈哈") | test}}</p>
</div>

Vue.filter('msgFormat', function(msg, arg, arg2){
	return msg.replace(/单纯/g, arg + arg2);
})
Vue.filter('test',function(msg){
	return msg + "======"
})
var vm=new Vue({
	el:'#app4',
	data:{
		msg:'单纯的少年，单纯的问，谁是最单纯的人？'
	}
})

渲染出来的效果：在这里插入图片描述
现在就根据上边说的filter的特性，给 品牌案例 的 “添加事件” 做修改吧。
（包括把一位数的时间调成为两位数，这里用了两种方法）

<!--引入bootstrap.css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<div id="app2">
	<div class="table-box">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">添加品牌</h3>
			</div>
			<div class="panel-body form-inline">
				<label>Id:<input type="text" class="form-control" v-model="id"/></label>
				<!-- @keyup.enter 键盘事件监听，监听回车键 -->
				<label>Name:<input type="text" class="form-control" v-model="name" @keyup.enter="addTr"/></label>
				<button @click="addTr" class="btn btn-primary">添加</button>
				<label>搜索名称关键字：<input type="text" class="form-control" v-model="keywords" /></label>
			</div>
		</div>
		<table class="table table-bordered table-hover table-striped">
			<thead>
				<tr>
					<th>Id</th>
					<th>品牌名称</th>
					<th>添加时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<!--之前都是在list数组中循环渲染过来的，现在定义了一个search方法，
					同时把搜索的关键字，通过传参的形式传递给search方法
					search方法 通过for循环 过滤list数组上的数据，把符合的数据保存到一个新数组中，
					再重新进行渲染
				-->
				<tr v-for="(value,index) in list">
					<td>{{value.id}}</td>
					<td v-text="value.name"></td>
					<td>{{value.ctime | dateFormat()}}</td>
					<td><a @click="deleteTr(index)">删除</a></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

//全局过滤器  过滤   定义时间格式
Vue.filter('dateFormat',function(dateStr,pattern="" ){
	//根据给定的字符串，得到特定的时间
	var dt = new Date(dateStr)
	var y = dt.getFullYear()
	var m = dt.getMonth() + 1
	var d = dt.getDate()
	//不确定是大写还是小写，就先统一一下，这里都统一成小写的
	if(pattern.toLowerCase() === 'yyyy-mm-dd'){
	return `${y}-${m}-${d}`
	}else{
		var hh = dt.getHours()
		var mm = dt.getMinutes()
		var ss = dt.getSeconds()
		return `${y}-${t(m)}-${t(d)} ${t(hh)}:${t(mm)}:${t(ss)}`
	}
	function t(s){return s<10 ? '0'+s : s}  //时间写成两位数的
})
var vm=Vue({
	el:"#app2",
	data:{
		list:[
			{id:1,name:'宝马',ctime:"2021-10-18 16:5:4"},
			{id:2,name:'奔驰',ctime:new Date()}
		],
		id:'',
		name:'',
		keywords:'',  //Vue.js 调试工具 devtools
	},
	methods:{
		addTr(){
			var newTr = {
				id:this.id, 
				name:this.name, 
				ctime:new Date()
			};
			this.list.push(newTr);
			this.id = this.name = '';
		},
		deleteTr(index){
			this.list.splice(index,1)
		},
		search(keywords){
			var newList = [];
			this.list.forEach(item => {
				if(item.name.indexOf(keywords) != -1){ //indexOf 查询复合字符串的下标
					newList.push(item);
				}
			})
			return newList
		},
	},
	filters:{   
		//定义私有过滤器，过滤器有两个条件，过滤器名称和函数
		//过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，优先私有过滤器
		dateFormat(dateStr,pattern="" ){
			var dt = new Date(dateStr)
			var y = dt.getFullYear()
			var m = dt.getMonth() + 1
			var d = dt.getDate()
			if(pattern.toLowerCase() === 'yyyy-mm-dd'){
				return `${y}-${m}-${d}`
			}else{
				//把时间定义成两位（比如8分钟写成08）
				//第一种方法
				//function t(s){return s<10 ? '0'+s : s} 
				//var hh = dt.getHours()
				//var mm = dt.getMinutes()
				//var ss = dt.getSeconds()
				//return `${y}-${t(m)}-${t(d)} ${t(hh)}:${t(mm)}:${t(ss)} ~~~~~`
				
				//第二种 使用ES6中的字符串新方法String.prototype.padStart(maxLength, fillString='')
				//或者String.prototype.padEnd(maxLength, fillString='') 来填充字符串
				var hh = dt.getHours().toString().padStart(2,'0')
				var mm = dt.getMinutes().toString().padStart(2,'0')
				var ss = dt.getSeconds().toString().padStart(2,'0')
				return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~`
			}	
		},
	}
})

我们希望啊，页面刚打开的时候，搜索关键字的输入框可以 自动获焦 ，我们可以用autofocus属性，也可以自己 自定义一个属性，得到我们要的结果。

使用 Vue.directive() 自定义全局的指令 v-focus。【注意】局部的指令，用directives:{focus:{… …}}
参数1：指令的名称，注意，在定义的时候，指令的名称前边，不需要加 v- 前缀，
但是在调用的时候，需要在指令名称前加上 v- 前缀
参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作

//注意：在每个函数中，第一个参数，永远是el，代表被绑定的元素，这个el参数，是一个原生的JS对象
Vue.directive('focus',{
	//	bind:function(el){ el.focus() }
	//每当指令绑定到元素上的时候， 会立即执行这个bind 函数，只执行一次		
	//在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候，调用focus方法没有作用，因为，一个元素，只有插入DOM之后，才能获取焦点
	//样式，只要通过指令帮顶给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联样式
	//将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然回解析样式，应用给这个元素。
	和样式相关的操作，一般都可以在bind执行
	
	//	inserted 表示元素插入到DOM中的时候，会执行inserted函数，触发一次
	和JS行为有关的操作，最好在 inserted 中去执行
	inserted:function(el){ el.focus() }
	
	//	updated:function(el){ el.focus() }
	//当组件 VNode 更新的时候，会执行updated，可能会触发多次
})

Vue.directive('color',{
//这里用bind就可以，因为样式不需要关心这个元素在哪里。
//而上边自定义的focus，是要给制定的DOM元素设置的，只能用inserted，它表示元素插入到DOM中了已经

//	bind:function(el){el.style.color = 'red'}
	bind(el,binding){ 
		console.log(binding.name)
		console.log(binding.value)
		console.log(binding.expression)
		el.style.color = binding.value 
	}
})

也可以在Vue的内部使用 directives 属性，进行自定义的设置：

var vm=new Vue({
	el:'#app2',
	//定义私有  自定义指令，名称和函数体
	directives:{
		'bold':{
			bind:function(el,binding){ el.style.fontWeight = binding.value }
		}
	}
})

在bind函数里边，参数中的第二个参数 bingding 是怎么来的？在vue的文档里边有说明
在这里插入图片描述
在HTML中进行应用：

<label>搜索名称关键字：<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'" /></label>

【注意】v-color=" ‘blue’ " 这里面的blue是字符串类型的，如果不加里边的引号，就是变量了。

最终最终的完整代码如下：

<!--引入bootstrap.css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<div id="app2">
	<div class="table-box">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">添加品牌</h3>
			</div>
			<div class="panel-body form-inline">
				<label>Id:<input type="text" class="form-control" v-model="id"/></label>
				<!-- @keyup.enter 键盘事件监听，监听回车键 -->
				<label>Name:<input type="text" class="form-control" v-model="name" @keyup.enter="addTr"/></label>
				<button @click="addTr" class="btn btn-primary">添加</button>
				<label>搜索名称关键字：<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'" /></label>
			</div>
		</div>
		<table class="table table-bordered table-hover table-striped">
			<thead>
				<tr>
					<th>Id</th>
					<th>品牌名称</th>
					<th>添加时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<!--之前都是在list数组中循环渲染过来的，现在定义了一个search方法，
					同时把搜索的关键字，通过传参的形式传递给search方法
					search方法 通过for循环 过滤list数组上的数据，把符合的数据保存到一个新数组中，
					再重新进行渲染
				-->
				<tr v-for="(value,index) in list">
					<td>{{value.id}}</td>
					<td v-text="value.name"></td>
					<td>{{value.ctime | dateFormat()}}</td>
					<td><a @click="deleteTr(index)">删除</a></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

//全局过滤器  过滤   定义时间格式
Vue.filter('dateFormat',function(dateStr,pattern="" ){
	//根据给定的字符串，得到特定的时间
	var dt = new Date(dateStr)
	var y = dt.getFullYear()
	var m = dt.getMonth() + 1
	var d = dt.getDate()
	//不确定是大写还是小写，就先统一一下，这里都统一成小写的
	if(pattern.toLowerCase() === 'yyyy-mm-dd'){
	return `${y}-${m}-${d}`
	}else{
		var hh = dt.getHours()
		var mm = dt.getMinutes()
		var ss = dt.getSeconds()
		return `${y}-${t(m)}-${t(d)} ${t(hh)}:${t(mm)}:${t(ss)}`
	}
	function t(s){return s<10 ? '0'+s : s}  //时间写成两位数的
})
//自定义属性 v-focus
//注意：在每个函数中，第一个参数，永远是el，代表被绑定的元素，这个el参数，是一个原生的JS对象
Vue.directive('focus',{
	inserted:function(el){ el.focus() }
})
//自定义属性 v-color
Vue.directive('color',{
	bind(el,binding){ 
		el.style.color = binding.value 
	}
})
var vm=Vue({
	el:"#app2",
	data:{
		list:[
			{id:1,name:'宝马',ctime:"2021-10-18 16:5:4"},
			{id:2,name:'奔驰',ctime:new Date()}
		],
		id:'',
		name:'',
		keywords:'',  //Vue.js 调试工具 devtools
	},
	methods:{
		addTr(){
			var newTr = {
				id:this.id, 
				name:this.name, 
				ctime:new Date()
			};
			this.list.push(newTr);
			this.id = this.name = '';
		},
		deleteTr(index){
			this.list.splice(index,1)
		},
		search(keywords){
			var newList = [];
			this.list.forEach(item => {
				if(item.name.indexOf(keywords) != -1){ //indexOf 查询复合字符串的下标
					newList.push(item);
				}
			})
			return newList
		},
	},
	//定义私有的 自定义指令，名称和函数体
	directives:{     
		'bold':{
			bind:function(el,binding){ el.style.fontWeight = binding.value }
		},
		'fontsize':function(el,binding){   //注意：这个function等同于把代码写到了bind和updated中去
			el.style.fontSize = parseInt(binding.value)+'px' 
		},
	},
	filters:{   
		//定义私有过滤器，过滤器有两个条件，过滤器名称和函数
		//过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致，优先私有过滤器
		dateFormat(dateStr,pattern="" ){
			var dt = new Date(dateStr)
			var y = dt.getFullYear()
			var m = dt.getMonth() + 1
			var d = dt.getDate()
			if(pattern.toLowerCase() === 'yyyy-mm-dd'){
				return `${y}-${m}-${d}`
			}else{
				//把时间定义成两位（比如8分钟写成08）
				//第一种方法
				//function t(s){return s<10 ? '0'+s : s} 
				//var hh = dt.getHours()
				//var mm = dt.getMinutes()
				//var ss = dt.getSeconds()
				//return `${y}-${t(m)}-${t(d)} ${t(hh)}:${t(mm)}:${t(ss)} ~~~~~`
				
				//第二种 使用ES6中的字符串新方法String.prototype.padStart(maxLength, fillString='')
				//或者String.prototype.padEnd(maxLength, fillString='') 来填充字符串
				var hh = dt.getHours().toString().padStart(2,'0')
				var mm = dt.getMinutes().toString().padStart(2,'0')
				var ss = dt.getSeconds().toString().padStart(2,'0')
				return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~`
			}	
		},
	}
})

默认打开的样子是这样的
在这里插入图片描述
添加一个“宝宝”，渲染以后是这样的在这里插入图片描述
在过滤的input框输入“宝”，结果只显示两项，如图在这里插入图片描述
点击“宝宝”一行的“删除”，这一行都删除了，结果如下
在这里插入图片描述

购物车案例

<div id="app4">
	<!--如果购物车有内容-->
	<div v-if="books.length">
	   	<table border="1" cellspacing="0">
	    	<thead>
	    	<tr>
	    		<td></td>
	    		<td>书籍名称</td>
	    		<td>出版日期</td>
	    		<td>价格</td>
	    		<td>购买数量</td>
	    		<td>操作</td>
	    	</tr>
	    	</thead>
	    	<tbody>
	    	<tr v-for="(item,index) in books">
	    		<td>{{item.id}}</td>
	    		<td>{{item.name}}</td>
	    		<td>{{item.date}}</td>
	    		<td>{{item.price | showPrice}}</td>    <!--<td>{{'￥' + item.price.toFixed(2)}}</td>--> <!--<td>{{result(item.price)}}</td>-->
	    		<td>
	    			<!--<button @click="reduceNum(index)" :disabled="item.num <= 1">-</button>-->
	    			<button @click="reduceNum(index)">-</button>
	    			{{item.num}}
	    			<button @click="addNum(index)">+</button>
	    		</td>
	    		<td><button @click="deleteTr(index)">移除</button></td>
	    	</tr>
	    	</tbody>
	    </table>
	    <h3>总价格：{{allPrice | showPrice}}</h3>
	</div>
	<!--如果没有数据，购物车为空-->
	<div v-else><h3>购物车为空</h3></div>
</div>

var vm=new Vue({
	el:'#app4',
	data:{
		books:[
	    	{id:1,name:'算法导论',date:'2006-9',price:85.00,num:5},
	    	{id:2,name:'UNIX编程艺术',date:'2006-2',price:59.00,num:1},
	    	{id:3,name:'编程珠玑',date:'2008-10',price:39.00,num:1},
	    	{id:4,name:'代码大全',date:'2006-3',price:128.00,num:1}
	    ]
	},
	methods:{
		result (price){ return '￥' + price.toFixed(2) },
		reduceNum(index){ 
			if(this.books[index].num > 1) {
				this.books[index].num -= 1;
			} else {
				alert('不能再减了'); 
			}  
		},
		addNum(index){ this.books[index].num += 1; },
		deleteTr(index){ 
			let result = confirm("确定要删除吗？");
			if(result == true){
			this.books.splice(index,1)
			}
		},
	},
	computed:{
		allPrice(){
			let result = 0;
			for(let i in this.books){
				result += this.books[i].price * this.books[i].num;
			}
			return result;
			//第二种
			//let result = 0;
			//for(let item of this.books){
			//	  result += item.price * item.num;
			//}
			//return result;
			//第三种
			//reurn this.books.reduce(function(pre,book){
			//	  return pre + book.price * book.count
			//},0)
		}
	},
	filters:{
		showPrice(price){ return '￥' + price.toFixed(2) }
	},
})

效果如下图：
在这里插入图片描述
删除第一项（书籍名称为《算法导论》的一行），效果如下图：
在这里插入图片描述
全部删除的时候，执行v-else 的语句，效果如下图：
在这里插入图片描述

齐露
关注
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 32万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
最新尚硅谷vue系列笔记
02-11
8. **学习资源**："尚硅谷vue系列笔记"可能包含的是针对Vue.js的学习资料，涵盖基础到高级的内容，帮助开发者深入理解Vue及其应用。`vue-learning-master.zip`和`vue-advance-master.zip`可能是不同阶段的学习资源，...
Vue 使用定时器定时刷新页面
普罗旺斯
04-25 1万+
data(){ return { intervalId:null } }, methods:{ // 定时刷新数据函数 dataRefreh() { // 计时器正在进行中，退出函数 if (this.intervalId != null) { return; } // 计时器为空，操作 this.intervalId = setInterval(() => { c
vue学习笔记（一）---- vue指令（浪起来~~~哦耶 的案例）
保持清醒
10-24 177
案例实现分析: 把第一个字符追加到最后一个字符身上去 基本结构: <body> <div id="app"> <input type="button" value="继续浪" @click="lang()"/> <input type="button" value="别浪了" @click="stop()"/> <h1>{{msg}}</h1> </div> <script sr
VUE-计时器的用法
LzzMandy的博客
06-08 1万+
功能简介： 1、初始值为0，点击【加】按钮，数字自+1；连续点击【加】，不影响数字+1 2、点击【停】按钮，停止+1 源码： <!DOCTYPE html> <html add="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt...
html 单元格 输入框,angularjs实现table表格td单元格单击变输入框/可编辑状态示例...
weixin_39723920的博客
06-04 208
序号班次分组操作{{value.id }}{{value.trainNumber}}{{value.groupId}}上移下移删除js部分：/*** 单元格单击变编辑* @param e*/$scope.edit=function(e){var td = $(e.target);var txt = td.text();var input = $("");td.html(input);input.c...
狂神说Vue笔记整理
热门推荐
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
狂神Vue笔记+源码.zip
05-10
狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue笔记+源码 狂神Vue...
【狂神说】Vue笔记（全部完整）.zip
01-22
在"【狂神说】Vue笔记"中，我们可以期待学习以下关键知识点： 1. **数据绑定**：Vue的数据绑定使用`v-bind`指令将数据模型与DOM元素属性关联。双向数据绑定通过`v-model`实现，使得视图和模型之间的数据实时同步。 ...
Vue笔记，Vue笔记，Vue笔记
07-18
Vue笔记主要涵盖了从基础到进阶的各种Vue知识，通过一系列的学习日程，旨在帮助开发者深入理解和熟练掌握Vue框架。 在"Day 01"，通常会介绍Vue的基础概念，包括Vue实例的创建、模板语法、数据绑定（如`v-bind`和`v-...
vue的render函数，你真的会用吗？单页面的render函数解坑
诸葛韩信--一个前往前端不归路的浪子
05-14 2万+
今天，回去又好好的看了一遍vue的render函数。感觉之前有一些误解和没有深刻的理解到位。 一、基础（官网例子） 官网的例子非常简单，但是又比较有代表性，如果是刚入门的vuer看起来也可能是有点懵懂的。但是不急，我们一步步来解析一下。 官网说让我们深入一个简单的例子，这个例子里render函数很实用。假设我们要生成一些带锚点的标题： <h1> <a name=...
输出提示信息
you can you up up up的博客
03-10 735
创建StringUtil的JavaBean类，判断用户名和密码 public class StringUtil { private String name; //用户名 private String pwd; //密码 private String cue; //提示信息 public String getName() { return name; } public voi...
Vue指令 v-on和跑马灯效果
junkaigege的博客
11-24 202
跑马灯效果 详细的思路就不写了，写个简略的，还有需要注意的几个点罗列出来。 基本上就是，写好区域和内容，然后点击浪起来按钮，执行浪的方法，点击低调，执行停止的方法（清除计时器），浪的方法就是计时器（获取字符串，截取字符串，字符串拼接，200），就可以实现了循环拼接，也就是前一个字符，显示在最后一个位置上的跑马灯效果，停止就是清除计时器。 substring截取字符串 setInterval 定时...
html使用vue实现秒表,vue 页面定时器
weixin_42131541的博客
07-07 385
data() {return {intervalId:null, // 定时器};},methods: {// 定时刷新数据函数 30s// 参考教程-> https://www.cnblogs.com/aurora-ql/p/13300202.htmldataRefreh() {// 计时器正在进行中，退出函数if (this.intervalId != null) {return...
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 484
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Thinkphp/Laravel基于vue的少数民族民歌网络图书馆管理系统
最新发布
abo2022的博客
09-30 1106
ThinkPHP是一个快速、简单的基于MVC和面向对象的轻量级PHP开发框架，遵循Apache2开源协议发布，从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，尤其注重开发体验和易用性，并且拥有众多的原创功能和特性，为WEB应用开发提供了强有力的支持Laravel非常的简洁并且是开源的，Laravel 是一个具有表现力、优雅语法的 Web 应用程序框架. Laravel 是构建现代全栈 Web 应用程序的最佳选择.
Vue3.0面试题汇总
qq_25741071的博客
09-29 902
实现 DOM 的方式进行 WebGL 编程。
初学Vue
2302_80244686的博客
09-29 755
一套用于构建用户界面的渐进式JavaScript框架Vue可以自底向上逐层的应用。
狂神说 vue 笔记
08-04
回答: 狂神在他的Vue笔记中提到了一些关于Vue的基本语法和MVVM模式的内容。在Vue的基本语法中，他引用了一个在线cdn来加载Vue的库文件，并介绍了v-bind指令的用法。[1]在MVVM模式的介绍中，他提到了MVVM模式的好处，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值