Vue学习-day02

标签: Vue  vue

day02

1. (掌握)JS中数组常用的响应式方法

  • push()方法:在数组最后位置添加元素。可以添加多个元素
  • pop() 方法:删除数组的最后一个元素
  • shift()方法:删除数组的第一个元素
  • unshift()方法:在数组最前面(第一个元素位置)添加元素.可以添加多个元素
  • splice()方法:
    • 删除元素、插入元素、替换元素
  • sort()方法:对数组排序
  • reverse()方法:数组元素进行反转.
<div id='app'>
    <ul>
        <li v-for='item in books'>{{item}}</li>
    </ul>
    <button @click="remove">
        删除
    </button>
</div>
<script>
new Vue({
    el:'#app',
    data:{
       books:['java','c#','pythono'] 
    },
    methods:{
        remove(){
            this.books.splic(1,3);//第一个参数表示从什么位置开始
            //第二个参数表示删除几个元素。如果是0 表示插入。插入的时候,后面要传入要插入的参数
            this.books.splic(1,3,"a","b","c");//从1位置替换3个元素
            
            this.books.splic(1,0,'m','n');//从1的位置插入m / n 
            
            this.books,splic(0,1,'cccc');//从0 的位置开始替换1个元素,替换的元素为 cccc
            //使用vue的set方法来修改数组的元素.
            Vue.set(this.books,0,'ccccc');
        }
    }
})


</script>

2. (练习)案例

需求:遍历数组的元素 ,第一个元素展示位红色。点击某个元素,颜色变成红色。

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

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

<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in books" 
				:class="{active:currentIndex===index}"
				@click="liChange(index)"
				>
					{{item}}
				</li>
			</ul>
			<button @click="replace">替换元素</button>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					books:['a','b','c','d','e'],
					currentIndex:0
				},
				methods:{
					
					replace(){
						//this.books.splice(0,0,'mm','nn')
						this.books.reverse()
					},
					liChange(index){
						this.currentIndex = index
					}
				}
			})
		</script>
	</body>

3.(练习)购物车案例

  • 保留两位小数: price.toFixed(2)
  • <button disabled>点击</button>disabled 属性表示不能点击
  • <button :disabled='item.count<=1'>点击</button> 小于等于1的时候不能点击.
  • 计算价格,使用computed计算属性来处理
<body>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="app">
			价格:{{price | priceFilter}}
			
			<hr color="red"/>
			
			
			<div v-if="this.bookInfo !=null">
				<span v-for="(item,key,index) in bookInfo"
					  :key="item">
					  {{key}}:{{item}}<br/>
				</span>
				
				购买数量:
					<button @click="subtraction" 
							:disabled="num===1">-</button>
						[ {{num}} ]  
					<button @click="add">+</button>
						
				<br/>
				总价格:{{totalPrice}}
				<br/> <a href="#" @click="remove">清空购物车</a>
				 
				
			</div>
			<div v-else>
				购物车里面没有商品
			</div>
		
		</div>
		<script>
			
			Vue.filter('priceFilter',function(value){
				return '$'+value.toFixed(2);
			});
			
			const bookInfo={
				name:'Java编程',
				price:'39'
			}
			
			
			new Vue({
				el:"#app",
				data:{
					price:22,
					bookInfo,
					num:1
				},
				methods:{
					add(){
						this.num++;
					},
					subtraction(){
						this.num--;
					},
					remove(){
						this.bookInfo = null;
					}
				},
				computed:{
					totalPrice(){
						return this.num*this.bookInfo.price;
					}
				},
				 mounted() {
				 	alert(this.bookInfo != null)
				 }
			})
		</script>
	</body>

这里是模仿的一个案例,v-for遍历的是一个对象。

3.1 vue的过滤器filter

Vue中的过滤器分为全局过滤器和局部过滤器。

  • 全局过滤器

<div id='app'>
    价格:{{price | priceFileter}}
</div>
<script>
Vue.filter('priceFileter',function(value){
   return '¥'+ value.toFixed(2) 
});

new Vue({
    el:'#app',
    data:{
        price:22
    }
})

</script>


参考官网API文档:https://cn.vuejs.org/v2/guide/filters.html

版权声明:本文为zhongxu_yuan原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zhongxu_yuan/article/details/109539774

智能推荐

【Sublime】使用 Sublime 工具时运行python文件

使用 Sublime 工具时报Decode error - output not utf-8解决办法   在菜单中tools中第四项编译系统 内最后一项增添新的编译系统 自动新建 Python.sublime-build文件,并添加"encoding":"cp936"这一行,保存即可 使用python2 则注释encoding改为utf-8 ctr...

java乐观锁和悲观锁最底层的实现

1. CAS实现的乐观锁 CAS(Compare And Swap 比较并且替换)是乐观锁的一种实现方式,是一种轻量级锁,JUC 中很多工具类的实现就是基于 CAS 的,也可以理解为自旋锁 JUC是指import java.util.concurrent下面的包, 比如:import java.util.concurrent.atomic.AtomicInteger; 最终实现是汇编指令:lock...

Python 中各种imread函数的区别与联系

  原博客:https://blog.csdn.net/renelian1572/article/details/78761278 最近一直在用python做图像处理相关的东西,被各种imread函数搞得很头疼,因此今天决定将这些imread总结一下,以免以后因此犯些愚蠢的错误。如果你正好也对此感到困惑可以看下这篇总结。当然,要了解具体的细节,还是应该 read the fuc...

用栈判断一个字符串是否平衡

注: (1)本文定义:左符号:‘(’、‘[’、‘{’…… 右符号:‘)’、‘]’、‘}’……. (2)所谓的字符串的符号平衡,是指字符串中的左符号与右符号对应且相等,如字符串中的如‘(&r...

JAVA环境变量配置

位置 计算机->属性->高级系统设置->环境变量 方式一 用户变量新建path 系统变量新建classpath 方式二 系统变量 新建JAVA_HOME,值为JDK路径 编辑path,前加 方式三 用户变量新建JAVA_HOME 此路径含lib、bin、jre等文件夹。后运行tomcat,eclipse等需此变量,故最好设。 用户变量编辑Path,前加 系统可在任何路径识别jav...

猜你喜欢

常用的伪类选择器

CSS选择器众多 CSS选择器及权重计算 最常用的莫过于类选择器,其它的相对用的就不会那么多了,当然属性选择器和为类选择器用的也会比较多,这里我们就常用的伪类选择器来讲一讲。 什么是伪类选择器? CSS伪类是用来添加一些选择器的特殊效果。 常用的为类选择器 状态伪类 我们中最常见的为类选择器就是a标签(链接)上的为类选择器。 当我们使用它们的时候,需要遵循一定的顺序问题,否则将可能出现bug 注意...

ButterKnife的使用介绍及原理探究(六)

前面分析了ButterKnife的源码,了解其实现原理,那么就将原理运用于实践吧。 github地址:       点击打开链接 一、自定义注解 这里为了便于理解,只提供BindView注解。 二、添加注解处理器 添加ViewInjectProcessor注解处理器,看代码, 这里分别实现了init、getSupportedAnnotationTypes、g...

1.写一个程序,提示输入两个字符串,然后进行比较,输出较小的字符串。考试复习题库1|要求:只能使用单字符比较操作。

1.写一个程序,提示输入两个字符串,然后进行比较,输出较小的字符串。 要求只能使用单字符比较操作。 参考代码: 实验结果截图:...

小demo:slideDown()实现二级菜单栏下拉效果

效果如下,鼠标经过显示隐藏的二级菜单栏 但是这样的时候会存在一个问题,就是鼠标快速不停移入移出会导致二级菜单栏闪屏现象,一般需要使用stop()来清除事件  ...

基于docker环境的mysql主从复制

1、安装docker 可以参考之前的博客,之前写过了~ 2、拉取mysql镜像 3、创建mysql01和mysql02实例 主: 从: 4、进入容器修改配置 1)修改主数据库配置 进入主数据库容器 切换到 etc/mysql/目录下 查看可以看到my.cnf文件,使用vim编辑器打开,但是需要提前安装 安装vim命令: 安装成功后,修改my.cnf文件 新增配置后的my.cnf: binlog 日...