Vue模版语法（初学Vue之v-指令语法）

目录

一、介绍

1.概念

2.常见指令语法及用法

1.v-bind:

2.v-model:

3.v-if / v-else-if / v-else:

4.v-for:

5.v-on:

6.v-show:

7.v-pre:

8.v-cloak:

二、使用

1.Mustache插值语法

2.v-once指令使用

3.v-text指令使用

4.v-html指令使用

5.v-pre指令使用

6.v-cloak指令使用

7.v-memo指令使用

8.v-bind指令使用

三、总结

一、介绍

1.概念

在Vue.js中，v-开头的指令是用来添加动态行为到你的HTML元素或者组件上的。这些指令可以被应用到普通的HTML元素上，也可以用在Vue.js组件上。

2.常见指令语法及用法

1.v-bind:

将HTML属性绑定到Vue实例的数据上，实现数据的动态更新。

<a v-bind:href="url">Link</a>
2.v-model:

在表单控件元素上创建双向数据绑定。

<input v-model="message">
3.v-if / v-else-if / v-else:

根据表达式的值条件性地渲染元素。

<p v-if="seen">Now you see me</p>
<p v-else>Now you don't</p>
4.v-for:

基于数据源循环渲染列表。

<ul><li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
5.v-on:

绑定事件监听器，用于触发响应函数。

<button v-on:click="handleClick">Click me</button>
6.v-show:

根据表达式的值控制元素的显示和隐藏，类似于CSS的display属性。

<p v-show="isVisible">Now you see me</p>
7.v-pre:

跳过这个元素和它的子元素的编译过程，用于显示原始Mustache标签。

<span v-pre>{{ message }}</span>
8.v-cloak:

这个指令保持在元素上直到关联实例结束编译，用于防止未编译的Mustache标签显示在页面上。

<div v-cloak>{{ message }}</div>

二、使用

1.Mustache插值语法

插值语法：{{}}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><!-- 1.基本使用 --><h2>{{message}}</h2><h2>当前计数：{{counter}}</h2><!-- 2.表达式 --><h2>计数双倍：{{counter*2}}</h2><h2>展示的信息: {{infos.split("")}}</h2><!-- 3.三元运算符--><h2>{{age >= 18 ? "成年人" : "未成年人"}}</h2><!--调用methods函数--><h2>{{formatDate(123)}}</h2><!-- 4.注意： 这里不能定义语句--><!-- <h2>{{const name = "why"}}</h2> --></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata: function () {return {message: "Hello Vue",counter: 100,infos: "my name is sleep",age: 19,time:123}},methods:{formatDate:function(date){return "2022-10-10" + date}}})app.mount("#app")</script>
</body></html>

2.v-once指令使用

只执行一次绑定数据

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><!-- 指令： v-once --><h2 v-once>{{ message }}<span>数字：{{counter}}</span></h2><h1>{{message}}</h1><button @click="changeMessage">改变message</button></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata: function () {return {message: "Hello Vue",counter: 100}},methods: {changeMessage: function () {this.message = " 你好啊，xxx"counter = counter + 100}}})app.mount("#app")</script>
</body></html>

3.v-text指令使用

插入text文字

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><h2>{{message}}</h2><h2 v-text = "message"></h2></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata: function () {return {message: "Hello Vue" }},})app.mount("#app")</script>
</body></html>

4.v-html指令使用

插入html元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><h2>{{content}}</h2><h2 v-html="content"></h2></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata: function () {return {content:`<span style="color: red; font-size: 30px;">哈哈哈</span>`}},})app.mount("#app")</script>
</body></html>

5.v-pre指令使用

显示原始标签，不使用mustache插值语法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><h2>{{message}}</h2><p>当前计数：{{counter}}</p><p v-pre>{{counter}}</p></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata: function () {return {message: "Hello Vue",counter: 0}},})app.mount("#app")</script>
</body></html>

6.v-cloak指令使用

胡子语法：vue语法使用时展现对应的html内容

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>[v-cloak]{display: none;}</style>
</head><body><div id="app"><h2 v-cloak>{{message}}</h2></div><script src="./lib/vue.js"></script><script>setTimeout(() => {const app = Vue.createApp({//data: option apidata: function () {return {message: "Hello Vue"}},})app.mount("#app")}, 3000);</script>
</body></html>

7.v-memo指令使用

数组展示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><div v-memo = "[name,age,height]"><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h2>身高：{{height}}</h2></div><button @click="updateInfo">改变信息</button></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata: function () {return {name: "why",age: 18,height: 1.88}},methods:{updateInfo:function(){this.name = "newName";this.age = 20;this.height = 1.75;}}})app.mount("#app")</script>
</body></html>

8.v-bind指令使用

动态绑定属性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><div><button @click = switchImg>切换图片</button></div><!--绑定img的src属性--><img v-bind:src="showImg" alt=""><!--语法糖： v-bind->:  --><img :src="showImg" alt=""><!--绑定a的href属性--><a v-bind:href="href">点击进入百度</a></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata: function () {return {imgUrl1:"https://img-operation.csdnimg.cn/csdn/silkroad/img/1712817929834.png",imgUrl2:"https://img-operation.csdnimg.cn/csdn/silkroad/img/1712629628741.png",showImg:"https://img-home.csdnimg.cn/images/20240416090633.jpg",href:"http://www.baidu.com"}},methods:{switchImg:function(){this.showImg = this.showImg === this.imgUrl1 ? this.imgUrl2 : this.imgUrl1}}})app.mount("#app")</script>
</body></html>

三、总结

v-开头的指令是Vue.js中用来添加动态行为到HTML元素或者组件上的。常见的指令包括：

  1. v-bind: 将HTML属性绑定到Vue实例的数据上。
  2. v-model: 创建双向数据绑定，用于表单控件元素。
  3. v-if / v-else-if / v-else: 根据条件渲染元素。
  4. v-for: 循环渲染列表。
  5. v-on: 绑定事件监听器，触发响应函数。
  6. v-show: 根据条件控制元素的显示和隐藏。
  7. v-pre: 跳过元素和子元素的编译过程，用于显示原始Mustache标签。
  8. v-cloak: 保持元素隐藏直到关联实例结束编译，防止未编译的Mustache标签显示。

这些指令使得Vue.js应用可以更加灵活和动态化，根据数据的变化实时更新DOM，提高了开发效率和用户体验。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/1462.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

「 网络安全常用术语解读 」什么是0day、1day、nday漏洞

「 网络安全常用术语解读 」什么是0day、1day、nday漏洞

1. 引言 漏洞攻击的时间窗口被称为漏洞窗口&#xff08;window of vulnerability&#xff09;。一般来说&#xff0c;漏洞窗口持续的时间越长&#xff0c;攻击者可以利用漏洞进行攻击的可能性就越大。 2. 0day 漏洞 0day 漏洞&#xff0c;又被称为"零日漏洞"&…
阅读更多...
Ocelot扩展应用

Ocelot扩展应用

Ocelot 是一个灵活且可扩展的 API 网关框架&#xff0c;它可以在各种应用场景中扩展和定制。通过扩展 Ocelot&#xff0c;你可以在网关中添加各种自定义功能、集成第三方服务以及优化性能。以下是一些 Ocelot 扩展应用的示例&#xff1a; 1. 自定义中间件&#xff1a; Ocelot…
阅读更多...
react之组件与JSX

react之组件与JSX

第一章 - 描述用户界面 概述&#xff1a;React是一个用于构建用户界面&#xff08;UI&#xff09;的JavaScript库&#xff0c;用户界面由按钮&#xff0c;文本和图像等小单元内容构建而成。React帮助你把它们组合成可重用&#xff0c;可嵌套的组件。从web端网站到移动端应用&a…
阅读更多...
[Java基础面试题] volatie 与 synchronized

[Java基础面试题] volatie 与 synchronized

1. 说一下 volatie 在Java中&#xff0c;volatile 关键字用于修饰变量&#xff0c;表示该变量是易变的&#xff0c;其值可能会被不同的线程修改。使用volatile关键字声明的变量具有两个特性&#xff1a; 原子性&#xff1a;volatile 变量的读写操作都是原子性的&#xff0c;即…
阅读更多...
【讲解下Spring Boot单元测试】

【讲解下Spring Boot单元测试】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…
阅读更多...
docker 容器数据在盘与盘之间迁移

docker 容器数据在盘与盘之间迁移

docker 容器数据在盘与盘之间迁移 1、停止容器systemctl stop docker2、docker目录备份# 备份 切记一定要先备份&#xff0c; /var/lib/docker目录为原docker数据目录&#xff0c; /data/docker_data_bak 为新盘的备份目录 cp -r /var/lib/docker /data/docker_data_bak # 移动…
阅读更多...
记录mac上图像处理

记录mac上图像处理

自适应二值化 import cv2# 读取图像 image cv2.imread(/Users/sinkarsenic/Downloads/用所选项目新建的文件夹/2.jpg, 0) # 使用灰度模式读取图像# 自适应二值化 adaptive_thresh cv2.adaptiveThreshold(image, 255, cv2.ADAPTIVE_THRESH_MEAN_C, cv2.THRESH_BINARY, 31, 2…
阅读更多...
什么是Java反射：作用、使用方法、原理三方面解析

什么是Java反射：作用、使用方法、原理三方面解析

Java反射是Java进阶编程内容之一&#xff0c;掌握反射应用与原理&#xff0c;有助于我们理解一些框架&#xff08;Spring&#xff09;和插件&#xff08;junit&#xff09;的运行原理。 一、Java反射的作用 简单来说&#xff0c;Java反射主要有两个作用&#xff1a; 使得程序…
阅读更多...
【漏洞复现】WordPress_Wholesale_Market admin-ajax.php 任意文件读取漏洞

【漏洞复现】WordPress_Wholesale_Market admin-ajax.php 任意文件读取漏洞

0x01 产品简介 WordPress Wholesale Market是一个WordPress主题，专门设计用于创建批发市场和在线商城网站。该主题提供了许多功能和设计元素，使您能够轻松地构建一个功能强大的批发市场平台，以满足批发商和零售商的需求。 0x02 漏洞概述 WordPress Wholesale Market存在任…
阅读更多...
VL02N交货单清除字段：VLSTK(分配状态)

VL02N交货单清除字段：VLSTK(分配状态)

VL02N交货单清除字段&#xff1a;VLSTK(分配状态) 通过查找增强对应的BADI&#xff1a;LE_SHP_DELIVERY_PROC 修改方法&#xff1a;IF_EX_LE_SHP_DELIVERY_PROC~CHANGE_DELIVERY_HEADER&#xff0c;代码如下&#xff1a;
阅读更多...
AngularJS中文手册后半部分学习

AngularJS中文手册后半部分学习

AngularJS 简介 AngularJS的中文参考手册 AngularJS 表格 结合ng-repeat命令 <div ng-app"myApp" ng-controller"customersCtrl"><table><tr ng-repeat"x in names"><td>{{ x.Name }}</td><td>{{ x.Coun…
阅读更多...
#QT获取ONENET云平台数据（草稿）

#QT获取ONENET云平台数据（草稿）

1.基本目标 &#xff08;1&#xff09;查询ONENT云平台的数据 &#xff08;2&#xff09;查询网络时间 &#xff08;3&#xff09;网络音乐拉取&#xff08;作为背景音乐&#xff09;&#xff0c;音量可调 2.制作UI界面 &#xff08;1&#xff09;串口图标的制作方法 &…
阅读更多...
天星金融（原小米金融）履行社会责任，提高社保政策知晓度

天星金融（原小米金融）履行社会责任，提高社保政策知晓度

二十大报告指出“为民造福是立党为公、执政为民的本质要求“&#xff0c;人民幸福安康是推动高质量发展的最终目的。社会保障作为维护社会公平、增进人民福祉的基本制度&#xff0c;既是“安全网”也是“稳定器”&#xff0c;发挥着改善民生的重要作用。为进一步提升人民群众对…
阅读更多...
如何解决DDoS攻击？群联科技做出回答。

如何解决DDoS攻击？群联科技做出回答。

DDoS攻击&#xff08;分布式拒绝服务攻击&#xff09;是一种恶意利用多台傀儡机协同发起大规模网络流量&#xff0c;旨在压垮目标系统或网络资源&#xff0c;使其无法正常服务的网络攻击手段。由于现代计算机和网络性能的提升&#xff0c;单点发起的DoS攻击已难以奏效&#xff…
阅读更多...
独立样本ｔ检验——python完整代码（直接运行就行）

独立样本ｔ检验——python完整代码（直接运行就行）

#!/usr/bin/env python # -*- coding: utf-8 -*- # Author : 三十二画生JH # Contact : fjhstudent163.com # Software: PyCharm # Time : 2024/4/21 21:49 # Site : 网址 # File : t_test.py # Version : # ---功能描述 """ 对实验数据做独立样本&am…
阅读更多...
速盾：不备案能用国内cdn吗？

速盾：不备案能用国内cdn吗？

在中国&#xff0c;所有的CDN&#xff08;内容分发网络&#xff09;服务都需要进行备案&#xff0c;这是根据相关法律法规的要求。备案是指网站所有者必须向中国互联网络信息中心&#xff08;CNNIC&#xff09;提交相关信息&#xff0c;以便在中国境内使用CDN服务。 备案的目的…
阅读更多...
博客网站/部署服务器---继上篇前端页面接入后端

博客网站/部署服务器---继上篇前端页面接入后端

目录 准备工作 创建用户类博客类与连接数据库 创建博客类 创建用户类 创建连接数据库工具类 实现对数据库数据博客的操作 实现对数据库用户的操作 创建数据库语句 登录页面 前端 后端 博客列表 前端 注销登录 写入数据 判断用户是否登录 替换页面用户昵称 后…
阅读更多...
Scala详解（4）

Scala详解（4）

Scala 面向对象 案例 定义类表示矩形(Rectangle)&#xff0c;提供对外获取周长(girth)和面积(area)的函数&#xff0c;并且为这个矩形类提供一个子类表示正方形(Square) package com.fesco.exer ​ object ObjectDemo1 { ​def main(args: Array[String]): Unit { ​val r …
阅读更多...
永恒之蓝上线CS

永恒之蓝上线CS

该文介绍了在内网环境下&#xff0c;利用永恒之蓝漏洞&#xff08;EternalBlue&#xff09;将攻击者控制台&#xff08;CS&#xff09;上线的方法。前提条件是目标机器可上网、无防火墙和杀毒软件&#xff0c;并且存在永恒之蓝漏洞。使用Erebus插件的eterblue功能&#xff0c;通…
阅读更多...
xpath的使用以及原理-元素定位

xpath的使用以及原理-元素定位

# 查找文本框输入文本 driver.find_element(By.CLASS_NAME,"nav-search-input").send_keys("i_cecream查找到了") #查找到之后点击 driver.find_element(By.CLASS_NAME,"nav-search-btn").click()time.sleep(30)selenium4的解析。 client调用se…
阅读更多...
最新文章

Copyright @ 2022~2023