Vue(二)的逻辑操作

最新推荐文章于 2024-03-30 00:04:03 发布
最新推荐文章于 2024-03-30 00:04:03 发布
阅读量394 收藏
点赞数
分类专栏： Vue 文章标签： vue javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43222167/article/details/106295700
版权

按照老师上课及官网的资料总结而成,官网:https://cn.vuejs.org/v2/guide

上一篇写的是基础操作:https://blog.csdn.net/qq_43222167/article/details/106267024

计算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="application/javascript" charset="UTF-8"></script>
	
	<body>
			<div id="app">
				<input v-model="i1" />
				<input v-model="i2" />
				<h1>值:{{getValue}}</h1>
			</div>
			
			<div id="example">
			  <p>Original message: "{{ message }}"</p>
			  <p>Computed reversed message: "{{ reversedMessage }}"</p>
			</div>
	</body>
	
	<script>
		var app=new Vue({
			el:"#app",
			//初始化
			data:{
				i1:0,
				i2:0
			},
			computed:{
				getValue:function(){
					/**
					 * parseInt():转成数字类型
					 */
					return parseInt(this.i1)+parseInt(this.i2);
				}
			}
		});
		
		var vm = new Vue({
		  el: '#example',
		  data: {
		    message: 'Hello'
		  },
		  computed: {
		    // 计算属性的 getter
		    reversedMessage: function () {
		      // `this` 指向 vm 实例
			  /**
			   * splig:拆分
			   * reverse:反转(从头至尾变成从尾至头)
			   * join:拼接成字符串
			   */
		      return this.message.split('').reverse().join('')
		    }
		  }
		})
	</script>
</html>

运行后
在这里插入图片描述
在输入框里面随意输入数值
在这里插入图片描述
值随着输入的改变而改变

GetSet:计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="application/javascript" charset="UTF-8"></script>
	<body>
		<div id="app">
			<h1>getCount:{{getCount}}</h1>
		</div>
	</body>
	
	<script>
		var app=new Vue({
			el:"#app",
			computed:{
				getCount:{
				 get:function(){
					console.log("get");
					return 10;
				},
				set:function(){
					console.log("set");
				} 
				}
			},
		});
		
	</script>
</html>

进行后默认
在这里插入图片描述
f12后在控制台里面输入getCount=22

在这里插入图片描述
走了get方法,set默认不走

侦听器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="application/javascript" charset="UTF-8"></script>
	<body>
		<div id="app">
			<input v-model="i3" />
		</div>
	</body>
	
	<script>
		var app=new Vue({
			el:"#app",
			//初始化
			data:{
				i3:1
			},
			watch:{//侦听器
				i3:function(newV,oldV){
					console.log("开始变化,新的值:"+newV);
					console.log("旧的值:"+oldV)
				}
			}
		});
	</script>
</html>

打开后的页面
在这里插入图片描述
摁下f12进行调试者模式后修改输入框里面的值
在这里插入图片描述
可以发生一直侦听着你修改的值

内联样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="application/javascript" charset="UTF-8"></script>
	
	<body>
		<div id="app">
			<h1 :style="{color:co}">内联style样式</h1>
			<h1 :style="cObject">内联style对象样式</h1>
		</div>
	</body>
	
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				co:"yellow",
				cObject:{
					color:"green"
				}
			}
		})
	</script>
</html>

If ElseIF Else

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="application/javascript" charset="UTF-8"></script>
	<body>
		<div id="app">
			<h1 v-if="show">
				if
			</h1>
			<h1 v-else>
				else
			</h1>
			
			<hr />
			<h1 v-if="a == 'a' ">
				A
			</h1>
			<h1 v-else-if="a == 'b' ">
				B
			</h1>
			<h1 v-else>
				other
			</h1>
		</div>
	</body>
	
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				show:true,
				a:"a"
			}
		})
	</script>
</html>

进来后的值是
在这里插入图片描述
把show的值改为false
在这里插入图片描述
a的值改为b
在这里插入图片描述
a的值再随意改成其它的

在这里插入图片描述

SHOW

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="application/javascript" charset="UTF-8"></script>
	<body>
		<div id="app">
			<h1 v-show="shows">ff</h1>
		</div>
	</body>
	
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				ok:false,
				shows:true
			}
		})
	</script>
</html>

运行后
在这里插入图片描述
修改shows的值为false
在这里插入图片描述
页面显示空空如也

for

遍历集合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="application/javascript" charset="UTF-8"></script>
	<body>
		<div id="app">
			<!--
			item:当前的值
			index:索引值
			list:集合名称
			-->
			<p v-for="(item,index) in list">
				{{index}} - {{item.value}}
			</p>
		</div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				list:[
					{value:"a"},
					{value:"b"},
					{value:"c"}
				]
			}
		})
	</script>
</html>

在这里插入图片描述
遍历对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="application/javascript" charset="UTF-8"></script>
	<body>
		<div id="app">
			<p v-for="item in obj">
				{{item}}
			</p>
		</div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				obj:{
					name:"名称",
					sex:"性别"
				}
			}
		})
	</script>
</html>

在这里插入图片描述

第三种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="application/javascript" charset="UTF-8"></script>
	<body>
		<div id="app">
			<p v-for="(item,name,index) in obj">
				{{index}} - {{name}} - {{item}} 
			</p>
		</div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				obj:{
					name:"名称",
					sex:"性别"
				}
			}
		})
	</script>
</html>

在这里插入图片描述
从方法中取出结果并且排序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js" type="application/javascript" charset="UTF-8"></script>
	<body>
		
		<div id="app">
			
			<!-- 遍历计算属性，对数组进行筛选操作 -->
			<p v-for="item in filterList">
				{{item.value}}
			</p>
		</div>
	</body>
	<script>
		var app=new Vue({
			el:"#app",
			data:{
				list:[
					{name:"a",value:"aa"},
					{name:"b",value:"bb"},
					{name:"c",value:"cc"}
				],
			},
			computed:{
				filterList:function(){
					return this.list.filter(
						function(v){
							if(v.name == "a"){
								return v
							}
						}
					)
				}
			}
		})
	</script>
</html>

在这里插入图片描述

Be Your Superhero
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础篇三：Vue的计算属性与侦听器
我的博客
10-05 1020
系列文章目录 Vue基础篇一：编写第一个Vue程序 Vue基础篇二：Vue组件的核心概念 Vue基础篇三：Vue的计算属性与侦听器 文章目录系列文章目录一、计算属性computed二、侦听器watch三、计算属性与侦听器的区别 一、计算属性computed 计算属性可以减少模板中的计算逻辑，进行数据缓存，提高性能。 <template> <div> <p>请输入字符串:</p> <input type="text" v-mode
Vue 事件处理操作实例详解
12-29
本文实例讲述了Vue 事件处理操作。分享给大家供大家参考，具体如下： 1 监听事件 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 html： <button v-on:click=counter +=1>递增</...
vue之逻辑运算
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
08-20 5827
 一、运费计算 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&am
vue中常用的逻辑指令
可达鸭的博客
07-11 360
<body> <div id="app"> //v-show的值为布尔值，true让标签的样式为 display:block,false则相反为display: none; <h1 v-show="false">{{ msg }}</h1> //v-if的值也是布尔值，ture是显示标签，false是不生成标签，这跟v-show是有区别的 <h1 v-if...
VueJS表达式支持：逻辑控制或运算
weixin_30237719的博客
06-28 1620
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.m...
vue二十四节气小程序源码
08-17
在这个项目中，Vue被用来构建二十四节气小程序，展示了Vue在构建小型但功能丰富的应用方面的强大能力。 【二十四节气】 二十四节气是中国古代根据太阳在黄道上的位置划分的一年中的二十四个阶段，反映了季节、气候...
Vue实现背景更换颜色操作
10-15
自定义指令是Vue的一个强大特性，允许开发者扩展Vue的默认行为，例如在这个场景中，可能用于更复杂的背景颜色变换逻辑。 总的来说，这个示例展示了Vue如何结合数据绑定、事件监听和计算逻辑来实现动态背景颜色更换...
vue手写一个自定义操作的工作流
06-15
在Vue.js框架中，手写一个自定义操作的工作流是一项挑战性的任务，但它能让你更好地理解和控制工作流的每一个细节。下面将详细讲解这个过程涉及的关键知识点。 首先，我们需要了解`Vue`的基础知识。Vue.js是一款轻...
vue-function-api：提供Vue的逻辑组合功能
02-06
为了实现Vue Function API，你需要按照以下步骤操作： 1. **创建逻辑函数**：根据组件的生命周期，创建相应的函数，如`initData()`, `handleMount()`, `handleUpdate()`, `cleanup()`等。 2. **在适当的地方调用...
7种经常使用的Vue，JavaScript逻辑运算符与赋值运算符
最新发布
2301_77110907的博客
03-30 740
其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）《前端开发四大模块核心知识笔记》最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】阶段就好。
vue可以直接进行运算么_Vue 计算属性 · Vue.js教程
weixin_34447182的博客
01-16 190
计算属性在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如：{{ message.split('').reverse().join('') }}在这种情况下，模板不再简单和清晰。在实现反向显示 message 之前，你应该确认它。这个问题在你不止一次反向显示 message 的时候变得更加糟糕。这就是为什么任何复杂逻辑，你都应当使用计...
vue可以直接进行运算么_使用Vue实现简单计算器
weixin_39852688的博客
12-31 266
使用Vue编写简单计算器，供大家参考，具体内容如下在Vue中，v-model 指令，可以实现表单元素和 Model 中数据的双向数据绑定，接下来，我们就用这个指令编写一个简单的计算器，代码如下Title+-*/// 创建 Vue 实例，得到 ViewModel，简写vmvar vm = new Vue({el: '#app',data: {n1: 0,n2: 0,opt: '+',result: ...
vue可以直接进行运算么_vue实现简易计算器功能
weixin_32299949的博客
01-30 397
本文实例为大家分享了vue实现简易计算器的具体代码，供大家参考，具体内容如下功能介绍1、可以实现加减乘除2、可以实现归零3、实现退格效果图一般般，样式随便写的，主要看功能以及实现方法代码加解释1、HTML部分首先布局，把要做的样子写出来，为每一个按键绑定一个点击事件2、css部分，随便写的样式，不是很重要input{width: 100px;height: 100px;border: 1px so...
Vue 中 == 和 ===、&& 、|| 等操作符的用法
热门推荐
故屿γ
07-04 1万+
!= == === 否则会被当成字符串 true 和字符串 657。 总结 Note: 欢迎点赞，留言，转载请在文章页面明显位置给出原文链接 知者，感谢您在茫茫人海中阅读了我的文章 没有个性 哪来的签名！ 详情请关注点我 持续更新中......
vue 一个公式 编辑器 组件
qq_45385505的博客
06-01 3827
修改大佬的代码,原来是可以修改参数的,我这边要求不能手动修改参数
Vue精简知识
寅贝勒的博客
10-31 4056
Vue基础 Vue快速体验 1. Vue介绍 1.1 Vue是什么 Vue.JS是优秀的前端 JavaScript 框架 react/angular/vue 库和框架的区别: 库(如jQuery) 库是工具. 提供大量API，体现了封装的思想、需要自己调用这些API 框架 框架提供了一套完整解决方案, 使用者要按照框架所规定的某种规范进行开发 1.2 为什么要学习 Vue 传统开发模式: JQuery+RequireJS/SeaJS+artTemplate+Gulp/Grunt 随着项目业务
一块学Vue:学习日记 - includes、indexOf、for循环、逻辑运算符 - 比较这四种方法在确认一个数是否存在于数组中时的表现
qq493919692的博客
01-09 3347
本文测试比较了includes、indexOf、for循环、逻辑运算符这四种方法，在确认一个数是否存在于数组中时的表现。
vue之v-show和v-if详解
春风化雨
12-11 5564
一、v-show与v-if的共同点 我们都知道在vue中v-show与v-if的作用效果是相同的(不含v-else)，都能控制元素在页面是否显示 在用法上也是相同的 <Model v-show="isShow" /> <Model v-if="isShow" /> 当表达式为true的时候，都会占据页面的位置 当表达式都为false时，都不会占据页面位置 二、v-show与v-if的区别 控制手段不同 编译过程不同 编译条件不同 控制手段：v-sh...
springmvc+vue的逻辑架构
01-19
SpringMVC是一个基于Java语言的MVC框架，用于构建Web应用程序。它的逻辑架构主要包括控制器、模型和视图。 控制器（Controller）负责处理客户端的请求，它接收来自客户端的请求并将其路由到相应的处理程序进行处理。在SpringMVC中，控制器通常由带有@Controller注解的Java类表示，它们通过@RequestMapping注解来定义其所处理的请求路径和请求方法。 模型（Model）用于封装应用程序的业务逻辑和数据。在SpringMVC中，模型通常由JavaBean表示，它们负责存储应用程序的数据以及定义应用程序的业务逻辑。模型对象将与视图共同工作，为视图提供数据。 视图（View）负责呈现模型的数据给客户端。在SpringMVC中，视图通常由HTML、JSP、Thymeleaf等模板引擎来表示，它们将模型中的数据进行渲染，并将最终的HTML内容返回给客户端。 Vue是一个流行的JavaScript框架，它主要用于构建用户界面。它的逻辑架构主要包括组件、数据驱动和虚拟DOM。 组件（Component）是Vue应用程序的基本构建块，它将应用程序划分为独立的可重用模块。每个组件都有自己的模板、脚本和样式，它们可以相互嵌套、组合和通信，以构建复杂的用户界面。 数据驱动（Data-Driven）是Vue的核心思想之一，它使得DOM与数据之间产生了关联。当数据发生变化时，DOM会作出相应的更新，从而实现了视图与数据的同步。 虚拟DOM（Virtual DOM）是Vue的一个重要特性，它通过虚拟DOM树与真实DOM树之间的比较，找出需要更新的部分，并最小化DOM操作，从而提高了应用程序的性能。 综上所述，SpringMVC和Vue都是流行的Web开发框架，它们分别负责处理后端的业务逻辑和前端的用户界面，通过它们的协作，可以构建出功能强大的Web应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值