Vue学习-day02

Vue学习-day02

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.(练习)购物车案例

Vue学习-day02

  • 保留两位小数: 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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/100734.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Java实现完美洗牌算法

    1问题描述有一个长度为2n的数组{a1,a2,a3,…,an,b1,b2,b3,…,bn},希望排序后变成{a1,b1,a2,b2,a3,b3,…,an,bn},请考虑有没有时间复杂度为O(n)而空间复杂度为O(1)的解法。2解决方案2.1位置置换算法下面算法的时间复杂度为O(n),空间复杂度为O(n)。packagecom.liuzhen.practice;publiccl…

  • Linux下用户和组的管理

    Linux下用户和组的管理

  • gradient boosting classifier_boosting算法有哪些

    gradient boosting classifier_boosting算法有哪些最近项目中涉及基于GradientBoostingRegression算法拟合时间序列曲线的内容,利用python机器学习包 scikit-learn中的GradientBoosti

  • 将数组转换成集合_java数组转换成集合

    将数组转换成集合_java数组转换成集合将数组转换成集合importjava.util.ArrayList;importjava.util.Arrays;importjava.util.List;publicclassDemo4_AsList{ publicstaticvoidmain(String[]args){ demo1(); //demo2(); //集合转数组,加泛型的 /…

  • 维控PLC学习笔记

    维控PLC学习笔记维控PLC学习笔记目录:1.主要编程思想2.梯形图3.视频教程4.网站和论坛依旧采用我多年的凌乱记忆法:感觉PLC就像一个处理函数的集成电路设备,我用的是老师给的维控PLC官网介绍说它很牛逼,可以兼容三菱FX系列而且比三菱快,价格也比三菱便宜。(这波抄袭很稳),因为我老师有一个公司是做工业包装机的,所以我这里有很多传感器可以使用。最近研究了…

  • linux安装yarn

    linux安装yarn这里介绍使用yum的方式:先要安装node.js,用node-v可以查看是否安装了node。1、添加yarn仓库wgethttps://dl.yarnpkg.com/rpm/yarn.repo-O/etc/yum.repos.d/yarn.repo2、安装yarnyum-yinstallyarn安装完成后,yarn-v可以查看版本。…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号