快速入门Vue(二)Vue的基本指令

2024-09-04 20:48

本文主要是介绍快速入门Vue(二)Vue的基本指令,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

超详细的Java知识点路线图


Vue.js的指令

Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性。

常用指令
  • v-model
  • v-if
  • v-else
  • v-show
  • v-for
  • v-bind
  • v-on
v-model指令

Vue.js可以使用v-model指令实现模型和表单元素的双向绑定,也就是说模型中的数据可以显示在表单元素中,修改模型数据表单元素会跟着修改,在表单元素中输入时模型数据也会更改。

<!DOCTYPE html>
<html>
<head><title>使用Vue</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><!--这是View部分,绑定了Model的数据--><div id="app"><p>{{name}}</p><p>{{sex}}</p><p>{{age}}</p><input type="text" placeholder="Input Name" v-model="name"><br><input type="text" placeholder="Input Sex" v-model="sex"><br><input type="text" placeholder="Input Age" v-model="age"><br></div><script type="text/javascript">//这是Model部分var person = {name:'张三',sex:'男',age:20};//这是ViewModel部分var vue = new Vue({el:'#app',data:person});</script>
</body>
</html>

在文本框输入时,上方内容会更新
在这里插入图片描述
在控制台修改模型的数据,文本框也会更新
在这里插入图片描述

v-if和v-else指令

v-if指令后面可以添加条件,当条件成立时会将所在标签插入到HTML中,条件不成立时所在标签不会出现在HTML中。
v-else标签和v-if标签配合使用,当if条件不成立时,可以将其他内容插入到HTML中。

<div id="app"><p>{{name}}</p><p>{{sex}}</p><p>{{age}}</p><h2 v-if="age>=18">{{name}}是成年人</h2><h2 v-else>{{name}}是未成年人</h2>
</div>
<script type="text/javascript">var person = {name:'张三',sex:'男',age:20};var vue = new Vue({el:'#app', data:person });
</script>

在控制台输入age为20,页面显示张三是成年人,输入age为15,显示张三是未成年人。
在这里插入图片描述

v-show指令

对条件进行判断,成立时显示标签,不成立时隐藏标签。
和v-else指令的效果比较类似,不同的是v-show指令是通过display样式实现标签的隐藏和显示,而v-if是将标签在HTML代码中插入和删除。

<h3 v-show="sex=='男'">{{name}}是男人</h3>
v-for指令

v-for指令用于遍历数组,所在的标签会反复添加。
语法是:
<标签 v-for=“变量名 in 数组名”>

<!--这是View部分,绑定了Model的数据-->
<table id="app">
<tr><th>姓名</th><th>性别</th><th>年龄</th>
</tr><!--这里的tr会出现多个-->
<tr v-for="person in persons"><td>{{person.name}}</td><td>{{person.sex}}</td><td>{{person.age}}</td>
</tr>
</div>
<script type="text/javascript">
//这是ViewModel部分
var vue = new Vue({ el:'#app', data:{
//Model部分persons:[ {name:'张三',sex:'男',age:20},{name:'李四',sex:'女',age:22},{name:'王五',sex:'男',age:26} ]} });
</script>

在这里插入图片描述

v-bind指令

v-bind可以和HTML标签的属性配合,通过表达式绑定不同的属性值。

v-bind:属性=”表达式”
案例:
在上面案例中添加样式
<style type="text/css">.redbg{background: red}.greenbg{background: green}</style>

在v-for所在的tr标签中添加:
v-bind:class=“person.sex==‘男’?‘redbg’:‘greenbg’”
这样实现了男女分别显示不同的背景颜色

在这里插入图片描述

v-on指令

v-on指令可以实现事件的绑定。
v-on:事件名=”函数(参数)”
注意:这里的函数需要在Vue对象的methods参数中定义

    <table id="app"><tr v-for="person in persons" v-bind:class="person.sex=='男'?'redbg':'greenbg'" v-on:click="sayHi(person.name)"><td>{{person.name}}</td><td>{{person.sex}}</td><td>{{person.age}}</td></tr></div><script type="text/javascript">//这是ViewModel部分var vue = new Vue({ el:'#app', data:{//Model部分persons:[ {name:'张三',sex:'男',age:20},{name:'李四',sex:'女',age:22},{name:'王五',sex:'男',age:26} ]},methods:{sayHi:function(name){alert("Hi!"+name);}}});
</script>

这里给每一行添加的点击事件
在这里插入图片描述

结束语

本文就到这里了,如果对你有用的话,就点个赞吧:)


大家如果需要学习其他Java知识点,戳这里 超详细的Java知识点汇总

这篇关于快速入门Vue(二)Vue的基本指令的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1136991

相关文章

Spring Boot 与微服务入门实战详细总结

《SpringBoot与微服务入门实战详细总结》本文讲解SpringBoot框架的核心特性如快速构建、自动配置、零XML与微服务架构的定义、演进及优缺点,涵盖开发环境准备和HelloWorld实战... 目录一、Spring Boot 核心概述二、微服务架构详解1. 微服务的定义与演进2. 微服务的优缺点三

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

从入门到进阶讲解Python自动化Playwright实战指南

《从入门到进阶讲解Python自动化Playwright实战指南》Playwright是针对Python语言的纯自动化工具,它可以通过单个API自动执行Chromium,Firefox和WebKit... 目录Playwright 简介核心优势安装步骤观点与案例结合Playwright 核心功能从零开始学习

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

C#连接SQL server数据库命令的基本步骤

《C#连接SQLserver数据库命令的基本步骤》文章讲解了连接SQLServer数据库的步骤,包括引入命名空间、构建连接字符串、使用SqlConnection和SqlCommand执行SQL操作,... 目录建议配合使用:如何下载和安装SQL server数据库-CSDN博客1. 引入必要的命名空间2.

Java中的数组与集合基本用法详解

《Java中的数组与集合基本用法详解》本文介绍了Java数组和集合框架的基础知识,数组部分涵盖了一维、二维及多维数组的声明、初始化、访问与遍历方法,以及Arrays类的常用操作,对Java数组与集合相... 目录一、Java数组基础1.1 数组结构概述1.2 一维数组1.2.1 声明与初始化1.2.2 访问

从入门到精通MySQL联合查询

《从入门到精通MySQL联合查询》:本文主要介绍从入门到精通MySQL联合查询,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下... 目录摘要1. 多表联合查询时mysql内部原理2. 内连接3. 外连接4. 自连接5. 子查询6. 合并查询7. 插入查询结果摘要前面我们学习了数据库设计时要满

从入门到精通C++11 <chrono> 库特性

《从入门到精通C++11<chrono>库特性》chrono库是C++11中一个非常强大和实用的库,它为时间处理提供了丰富的功能和类型安全的接口,通过本文的介绍,我们了解了chrono库的基本概念... 目录一、引言1.1 为什么需要<chrono>库1.2<chrono>库的基本概念二、时间段(Durat

Go语言数据库编程GORM 的基本使用详解

《Go语言数据库编程GORM的基本使用详解》GORM是Go语言流行的ORM框架,封装database/sql,支持自动迁移、关联、事务等,提供CRUD、条件查询、钩子函数、日志等功能,简化数据库操作... 目录一、安装与初始化1. 安装 GORM 及数据库驱动2. 建立数据库连接二、定义模型结构体三、自动迁

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置(如匹配策略、转换器),可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例:简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹