Vue入门笔记Day6

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

1.Vue中的样式绑定

（1）class的对象绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue中的样式绑定</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.activated{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div @click="handleDivClick"
				:class="{activated:isActivated}" >  <!-- 第一种方法class的对象绑定 -->
				<!-- class的元素的activated，是否显示取决于isActivated -->
				Hello World
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
					
				data:{
					isActivated:false
				},
				methods:{
					handleDivClick:function(){
						this.isActivated = !this.isActivated
						//做取反，false变true，true变false
					}
				}
			})
		</script>
	</body>
</html>

（2）数组方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue中的样式绑定</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.activated{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div @click="handleDivClick"
				:class="[activated,activatedOne]" 
			> <!-- 数组可以有多个元素 -->
				Hello World
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
					
				data:{
					activated:"",
					activatedOne:"activated-One"
				},
				methods:{
					handleDivClick:function(){
						// if(this.activated === "activated")
						// this.activated = "";
						// else this.activated = "activated";
						this.activated = this.activated == "activated"?"":"activated"
					}
				}
			})
		</script>
	</body>
</html>

（3）style内联样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue中的样式绑定</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id="app">
			<div :style="styleObj" @click="handleDivClick">
				Hello World
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					styleObj:{
						color:"black"
					}
				},	
				
				methods:{
					handleDivClick:function(){
						this.styleObj.color=this.styleObj.color=="black"?"red":"black"
					}
				}
			})
		</script>
	</body>
</html>

（4）style样式数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue中的样式绑定</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id="app">
			<div :style="[styleObj,{fontSize:'20px'}]" @click="handleDivClick">
				Hello World
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					styleObj:{
						color:"black"
					}
				},	
				
				methods:{
					handleDivClick:function(){
						this.styleObj.color=this.styleObj.color=="black"?"red":"black"
					}
				}
			})
		</script>
	</body>
</html>

2.Vue中的条件渲染

（1）v-if与v-show

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue中的条件渲染</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div v-if="show">
				{{massage}}
			</div>
			<div v-show="show">
				{{massage1}}
			</div>
		</div>
		<script type="text/javascript">
			var vm =new Vue({
			el:"#app",
			data:{
				show:false,
				massage:"hello",
				massage1:"hello1"
			}
		})
		</script>
		
	</body>
</html>

在这里插入图片描述
v-if与v-show虽然都没有在页面显示，但是v-show是直接把div display的值设置为none；v-if是直接不存在dom上了，如果频繁的改变v-show比v-if效率高。

（2）v-if

v-else：可以用 v-else 指令给 v-if 添加一个 “else” 块：
v-else-if：v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue中的条件渲染</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div v-if="show ==='a'">  <!-- //v-if决定div是否存在 -->
				This is A
			</div>
			
			<div v-else-if="show ==='b'">
				This is B
			</div>

			<div v-else >  <!-- v-if 与v-else 必须在一起使用 -->
				Bye World
			</div>
		</div>
		<script type="text/javascript">
			var vm =new Vue({
			el:"#app",
			data:{
				show:"a",
		
			}
		})
		</script>
		
	</body>
</html>

（3）key值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue中的条件渲染</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- input会复用网页上已经存在的，当用户名变成邮箱吗时，输入框内容不会被清空 -->
			<div v-if="show">  
				用户名：<input/ key="username">   <!-- //如果不用key值，input内的值不被清空 -->
			</div>
			<div v-else >                        <!-- key值不一样vue就不会复用以前的input标签了 -->
				邮箱名：<input/ key="password">
			</div>
		</div>
		<script type="text/javascript">
			var vm =new Vue({
			el:"#app",
			data:{
				show:false,
		
			}
		})
		</script>
		
	</body>
</html>

(4)Vue列表渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue列表渲染</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<template v-for="(item,index) of List" :key="item.id">  <!-- template模板占位符可以帮助我们去包裹一些元素，但是不会被渲染到页面上 -->
				<div>
					{{item.text}}-------{{index}}
				</div>
				<span>{{item.text}}</span>
			</template>
			
		</div>
		<script type="text/javascript">
			//修改数组数据不能通过下标修改，只有通过vue提供的数组遍历方法修改才能实现数据发生变化页面也发生变化。
			//一共7个数组遍历方法 push pop shift unshift spilce sort reverse
			//也可以改变数据的引用地址让数据变化
			var vm = new Vue({
				el:"#app",
				data:{
					List:[{
						id:"01021313",          //数据库真实返回数据大概是这样的  会带id  key可以用id
						text:"hello"
					},{
						id:"01021383",
						text:"Dell"
					},{
						id:"01021373",
						text:"Lee"
					}]
				}
					
				
			})
		</script>
	</body>
</html>

（5）Vue对象渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div v-for="(item,key,index) in userInfo">
				{{item}}----{{key}}----{{index}}
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					userInfo:{
						name:"Dell",
						age:"18",
						gender:"male"
					}
				}
			})
		</script>
	</body>
</html>

其中key值为键值对的键值，index是页面索引下标。

阿浩！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue入门笔记Day2
weixin_43273921的博客
03-31 98
1.MVVM模式 传统设计模式MVP：Model层:数据层 Presenter层:呈现层控制器（控制层） View层：视图层（一般指dom展示） 2.组件 组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： （1）全局组件 语法格式如下： Vue.component(组件名,{方法}) Vue.component("TodoItem"
Vue笔记 day5
还没想好
11-05 201
上周准备参加测试大赛，浪费了一周时间没有学习VUE，罪过... 今天开始要双管齐下，还要看论文，三管齐抓啦〜                                                                                                                  （1）父子组件之间的传值 在教程里，它认为，Vue的实例...
Vue入门笔记Day 1
weixin_43273921的博客
03-31 101
1.创建Vue实例 var vm = new Vue({ }) 2. data 用于定义属性。 methods 用于定义的函数，可以通过 return 来返回函数值。 {{ }} 用于输出对象属性和函数返回值。 3.插值 数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值. 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello world&lt
Vue入门day01笔记
10-27
### Vue入门day01笔记详解 #### 库与框架的区别 在软件开发中，库（library）和框架（framework）都是提高开发效率、简化开发流程的重要工具，但它们有着本质的区别。 - **库（Library）**： - 库通常为开发者...
Vue入门笔记以及项目源码
04-18
这个压缩包中的“Vue入门笔记以及项目源码”提供了从基础到实践的全面学习材料，覆盖了Vue的核心概念和技术。 首先，让我们按照文件名的顺序逐个解析学习内容： 1. **Day 01**：通常会涵盖Vue的基础知识，包括Vue...
vue 3.0学习笔记(从入门到精通)
10-07
本文将从入门到精通的角度详细介绍Vue 3.0的关键知识点。 首先，安装Vue 3.0的开发环境是至关重要的。你可以通过npm（Node Package Manager）全局安装Vue CLI的最新版本，命令为`npm I -g @vue/cli@next`。接着，...
尚硅谷vue3.0笔记
05-30
尚硅谷vue3.0笔记
最新尚硅谷vue系列笔记
02-11
6. **生态丰富**：Vue生态系统非常活跃，有Vuex用于状态管理，Vue CLI作为项目脚手架工具，Axios用于异步请求，Element UI等UI库提供预设的组件样式，以及大量社区开发的插件和工具。 7. **Vue 3 更新**：Vue 3版本...
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 469
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 624
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 118
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
Electron学习与总结
song854601134的博客
08-12 146
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
【vue教程】五. Vue 的路由管理
最新发布
前端探索者
08-13 535
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 416
注释很详细，直接上代码……
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 449
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
【Ajax使用说明】Ajax、Axios以及跨域
aaaa_aaab的博客
08-12 693
XML：可扩展标记语言XML：被设计用来传输和存储数据XML和HTML类似，不同点：HTML中都是预定义标签，XML中没有预定义标签，全是自定义标签，用来表示一些数据现在已被JSON取代。
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 460
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 411
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
Vue入门与基础知识点总结
本文档是一篇关于个人学习Vue框架的笔记，作者分享了自己初次接触Vue.js时的心得体会和关键知识点。文章按照时间线展开，从认识Vue.js及其原因、安装与配置，到初体验中的基础组件如HelloVuejs、列表渲染和计数器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值