Vue模板语法集（上）

news2025/2/22 19:18:48

1.插值

插值：用双大括号{{}}将数据绑定到模板中，实现简单的数据渲染。例如：<p>{{message}}</p>，其中message是一个变量。

    1.1.3 属性

          HTML属性中的值应使用v-bind指令

    1.1.4 表达式

1.1.1 文本

          {{msg}

 1.1.2 html

          使用v-html

          Vue提供了完全的JavaScript表达式支持

 效果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
		<style type="text/css">
			.f30{
				font-size: 30px;
			}
			
			
		</style>
	</head>
	<body>
		<div id="app">
			{{msg}}
			<p>html解析</p>
		{{msg2}}
		<b :class="msg3" v-html="msg2"></b>
		{{msg4+1}}
	{{sb.substring(3,8)}}
		<input v-model="ok">
		{{ok==1? "你好我是雪豹":"妈妈每天都给我抽点支烟，以及听雪"}}
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){
					return {msg:'hellow 你好 vue',
					msg2:'<span style="color:yellow">hello 你好vue </span>',
					msg3:'f30',
					msg4:5,
					ok:1,
					sb:'邓郑伟学坤坤跳舞'
					}
				}
				
			})
			
			
		</script>
	</body>
</html>

2.指令：

用v-开头的特殊属性，可以实现DOM操作、条件渲染、循环、事件绑定等功能。例如：<p v-if="isShow">{{message}}</p>，其中v-if是条件渲染的指令。

核心指令

  (v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

  v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素

他们只能是兄弟元素

v-else-if上一个兄弟元素必须是v-if

v-else上一个兄弟元素必须是v-if或者是v-else-if

  v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

  v-for：类似JS的遍历，

 遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

 遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

  v-bind

  v-on

  v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值   

v-for/v-model一起绑定[多选]复选框和单选框  

使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
		<title>指令</title>
	</head>
	<body>
		<div id="app">
			<input v-model="score">
			<b v-if="score < 60 ">不及格</b>
			<b v-else-if="score >= 60 && score <70 ">及格</b>
			<b v-else-if="score >= 70 && score <80 ">中等</b>
			<b v-else-if="score >= 80 && score <90 ">良好</b>
			<b v-else="score >=90 && score <100>">优秀</b>
			<b>{{array}}</b>
			<i v-for="a in array">{{a}}||</i>
	          <i v-for="u in User">{{u.name}}喜欢{{u.hobby}}今年{{u.age}}</i>
			<br />
			<select>
				<option v-for="h in hobby" :value="h.id">
			{{h.name}}
			</option></select>
			<br />
			<div v-for="h in hobby"><input type="checkbox" name="hpbby" :value="h.id">{{h.name}}</div>
			<p>v-show</p>
						<div v-show="score>90">v-show-上优秀学员名单</div>
						<div v-if="score>90">v-if-上优秀学员名单</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data(){
	         	return {score:60,
					array:[1,2,3,4],
					User:[{name:'小威',hobby:'玩棒子',age:18},
					{name:'小威',hobby:'玩棒子',age:18},
					{name:'小威',hobby:'玩棒子',age:18}],
					
					hobby:[{id:1,name:'洗脚'},
					{id:2,name:'保健'},
					{id:3,name:'按摩'},
					{id:4,name:'spa'}]
					} 		
				}
				
			})
			
			
		</script>
	</body>
</html>

效果：

 3.动态参数

动态参数：除了用固定的指令名称，还可以使用动态参数来动态绑定数据。例如：<a v-bind:href="url">{{ message }}</a>，其中v-bind动态绑定href属性的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
		<title>指令</title>
	</head>
	<body>
		<div id="app">
			<input v-model="score">
			<b v-if="score < 60 ">不及格</b>
			<b v-else-if="score >= 60 && score <70 ">及格</b>
			<b v-else-if="score >= 70 && score <80 ">中等</b>
			<b v-else-if="score >= 80 && score <90 ">良好</b>
			<b v-else="score >=90 && score <100>">优秀</b>
			<b>{{array}}</b>
			<i v-for="a in array">{{a}}||</i>
	          <i v-for="u in User">{{u.name}}喜欢{{u.hobby}}今年{{u.age}}</i>
			<br />
			<select>
				<option v-for="h in hobby" :value="h.id">
			{{h.name}}
			</option></select>
			<br />
			<div v-for="h in hobby"><input type="checkbox" name="hpbby" :value="h.id">{{h.name}}</div>
			<p>v-show</p>
						<div v-show="score>90">v-show-上优秀学员名单</div>
						<div v-if="score>90">v-if-上优秀学员名单</div>
		<p>动态参数</p>
		<input v-model="evname"/>
		<button v-on:[evname]="test">点我</button>
		</div>

		<script type="text/javascript">
			new Vue({
				el:'#app',
				data(){
	         	return {score:60,
					array:[1,2,3,4],
					User:[{name:'小威',hobby:'玩棒子',age:18},
					{name:'小威',hobby:'玩棒子',age:18},
					{name:'小威',hobby:'玩棒子',age:18}],
					
					hobby:[{id:1,name:'洗脚'},
					{id:2,name:'保健'},
					{id:3,name:'按摩'},
					{id:4,name:'spa'}],
					evname:'click'
					}; 		
				}
				,methods:{
					test(){
						alert("点我试试")
					}
				}
			})
			
			
		</script>
	</body>
</html>

4.过滤器

  vue允许自定义过滤器，一般用于常见的文本格式化，过滤器可用的两个地方：双花括号插值与v-bind表达式，过滤器应该被添加在js表达式的尾部，使用管道运算符 " | "

局部过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
		<title>过滤器</title>
	</head>
	<body>
		<div id='app'>
			<p>局部过滤器</p>
			{{msg}}
			<p>局部过滤器串行使用</p>
		{{msg | filterA | filterB}}
		<p>局部过滤器传参</p>
			{{msg | filterC(2,5)}}
		</div>
		<script type="text/javascript">
			new Vue({
			el:'#app',
			filters:{
				'filterA':function(v){
					return v.substring(0,5);
				},
				'filterB':function(v){
					return v.substring(2,5);
				},
				'filterC':function(v,begin,end){
					return v.substring(begin,end);
				}
			},
				data(){
					return {
						msg:'你好 饿了么'
					}
				}
				
			})
			
			
		</script>
	</body>
</html>

全局过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
		<script src="date.js"></script>
		<title>过滤器</title>
	</head>
	<body>
		<div id='app'>
			<p>局部过滤器</p>
			{{msg}}
			<p>局部过滤器串行使用</p>
		{{msg | filterA | filterB}}
		<p>局部过滤器传参</p>
			{{msg | filterC(2,5)}}
			<p>全局过滤器</p>
    没有过滤器的结果：		{{time}}
	有过滤器的结果：{{time|fmtDate}}
		<script src="js/date.js"></script>
		</div>
		<script type="text/javascript">
		Vue.filter('fmtDate', function(value) {
						return fmtDate(value, 'yyyy年MM月dd日')
					});
			
			new Vue({
			el:'#app',
			filters:{
				'filterA':function(v){
					return v.substring(0,5);
				},
				'filterB':function(v){
					return v.substring(2,5);
				},
				'filterC':function(v,begin,end){
					return v.substring(begin,end);
				}
			},
				data(){
					return {
						msg:'你好 饿了么',
						time:new Date()
					}
				}
				
			})
			
			
		</script>
	</body>
</html>

data.js

//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
	//debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};

function fmtDate(date, pattern) {
	var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};

 结果：

5.计算属性监听属性

计算属性

<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
		<meta charset="utf-8">
		<title>计算属性监听属性</title>
	</head>
	<body>
		<div id="app">
			<p>计算属性</p>
			单价：<input v-model="price">
			数量：<input v-model="num">
			小计:{{count}}
		</div>
		<script type="text/javascript">
			new Vue({
				
				el:'#app',
				data(){
					return {
						price:79,
						num:1
					};
				},
				computed:{
					count:function(){
					return this.price*this.num	
					}
				}
			})
			
		</script>
	</body>
</html>

效果：

 改为2

计算属性特点：一方影响另一方（单向）

 监听属性：

<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
		<meta charset="utf-8">
		<title>计算属性监听属性</title>
	</head>
	<body>
		<div id="app">
			<p>计算属性</p>
			单价：<input v-model="price">
			数量：<input v-model="num">
			小计:{{count}}
			<p>监听属性</p>
			千米：<input v-model="km" />
			米：<input v-model="m"/>
		</div>
		<script type="text/javascript">
			new Vue({
				
				el:'#app',
				data(){
					return {
						price:79,
						num:1,
						m:1000,
						km:1
					};
				},
				computed:{
					count:function(){
					return this.price*this.num	
					}
				},
				watch:{
					km:function(v){
						this.m=parseInt(v) * 1000;
					},
					m:function(v){
						this.km=parseInt(v) / 1000;
					}
				}
			})
			
		</script>
	</body>
</html>

效果：

 监听属性特点：两方互相影响（双向）

实战案例：

购物车：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>购物车</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	<style>
		.container {
			width: 600px;
			margin: 0 auto;
		}
		table {
			border-collapse: collapse;
			width: 100%;
		}
		table td {
			border: 1px solid #ddd;
			padding: 10px;
			text-align: center;
		}
		.input-wrapper {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		button {
			padding: 5px 10px;
			background-color: #eee;
			border: none;
			cursor: pointer;
		}
	</style>
</head>
<body>
<div id="app" class="container">
	<p>购物车</p>
	<table>
		<thead>
		<tr>
			<th>物品</th>
			<th>单价</th>
			<th>数量</th>
			<th>小计</th>
		</tr>
		</thead>
		<tbody>
		<tr v-for="(item, index) in items" :key="index">
			<td>{{ item.name }}</td>
			<td>{{ item.price }}</td>
			<td class="input-wrapper">
				<button @click="decrement(index)">-</button>
				<input v-model="item.quantity" />
				<button @click="increment(index)">+</button>
			</td>
			<td>{{ item.price * item.quantity }}</td>
		</tr>
		<tr>
			<td colspan="3">总价</td>
			<td>{{ total }}</td>
		</tr>
		</tbody>
	</table>
</div>

<script type="text/javascript">
	new Vue({
		el: '#app',
		data() {
			return {
				items: [
					{ name: '帽子', price: 10, quantity: 1 },
					{ name: '衣服', price: 30, quantity: 1 },
					{ name: '裤子', price: 20, quantity: 1 },
					{ name: '肾宝片', price: 200, quantity: 1 },
					{ name: '羊腰子', price: 20, quantity: 1 },
				],
			};
		},
		methods: {
			increment(index) {
				this.items[index].quantity++;
			},
			decrement(index) {
				if (this.items[index].quantity > 1) {
					this.items[index].quantity--;
				}
			},
		},
		computed: {
			total() {
				return this.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
			},
		},
	});
</script>
</body>
</html>

 效果：

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

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

相关文章

HY57V561620FTP_SDRAM文档总结

HY57V561620FTP_SDRAM文档总结

文章目录 前言一、sdram简介1、名称解释2、发展历史3、与原先学习的RAM区别4、SDRAM分类 二、HY57V561620FTP1、描述1、内存划分2、特征3、引脚说明4、内部结构介绍5、交流特性6、可能涉及到的命令组合 2、SDRAM 具体操作流程1、整体状态图2、SDRAM指令及时序图3、芯片初始化(这…
阅读更多...
​全国馆藏《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作——2023学生开学季辉少许

​全国馆藏《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作——2023学生开学季辉少许

​全国馆藏《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作——2023学生开学季辉少许
阅读更多...
一招制胜，如何写好一份优秀的营销策划方案？

一招制胜，如何写好一份优秀的营销策划方案？

我相信很多策划人一直都在积累很多策划模版和案例&#xff0c;觉得写策划案不就是照着相似的案例抄一抄。 虽然说这样做不是什么错误&#xff0c;但太依赖这样的方式的话&#xff0c;对于自己所写的东西&#xff0c;总会有一种掌控力不足的感觉。 究其原因&#xff0c;是你钻…
阅读更多...
成集云 | 用友U8集成聚水潭ERP（用友U8主管库存）| 解决方案

成集云 | 用友U8集成聚水潭ERP（用友U8主管库存）| 解决方案

源系统成集云目标系统 方案介绍 用友U8是一套企业级的解决方案&#xff0c;可满足不同的制造、商务模式下&#xff0c;不同运营模式下的企业经营管理。它全面集成了财务、生产制造及供应链的成熟应用&#xff0c;并延伸客户管理至客户关系管理&#xff08;CRM&#xff09;&am…
阅读更多...
容器的数据卷

容器的数据卷

容器的数据卷 操作数据卷 # 基本格式 docker volume [common] # 创建一个volume docker volume create # 显示一个或多个volume docker volume inspect # 列出所以的volume docker volume ls # 删除未使用的volume docker volume prune # 删除一个或多个volume docker volume…
阅读更多...
计算机视觉与深度学习-卷积神经网络-纹理表示卷积神经网络-卷积神经网络-[北邮鲁鹏]

计算机视觉与深度学习-卷积神经网络-纹理表示卷积神经网络-卷积神经网络-[北邮鲁鹏]

这里写目录标题 参考文章全连接神经网络全连接神经网络的瓶颈全连接神经网络应用场景 卷积神经网络卷积层(CONV)卷积核卷积操作卷积层设计卷积步长(stride)边界填充特征响应图组尺寸计算 激活层池化层(POOL)池化操作定义池化操作作用池化层超参数常见池化操作 全连接层(FC)样本…
阅读更多...
ESD最常用的3种模型？|深圳比创达EMC

ESD最常用的3种模型？|深圳比创达EMC

为了定量表征 ESD的特性&#xff0c;一般将 ESD 转化成模型表达方式&#xff0c;ESD 的模型有很多种&#xff0c;下面介绍最常用的三种。 1.HBM&#xff1a;Human Body Model&#xff0c;人体模型 该模型表征人体带电接触器件放电&#xff0c;Rb 为等效人体电阻&#xff0c;Cb…
阅读更多...
Pikachu XSS(跨站脚本攻击)

Pikachu XSS(跨站脚本攻击)

文章目录 Cross-Site ScriptingXSS&#xff08;跨站脚本&#xff09;概述反射型[xss](https://so.csdn.net/so/search?qxss&spm1001.2101.3001.7020)(get)反射型xss(post)存储型xssDOM型xssDOM型xss-xxss-盲打xss-过滤xss之htmlspecialcharsxss之href输出xss之js输出 Cros…
阅读更多...
02. Springboot集成Flyway

02. Springboot集成Flyway

目录 1、前言 2、什么是Flyway&#xff1f; 3、为什么要使用 Flyway&#xff1f; 4、简单示例 4.1、创建Spring Boot工程 4.2、添加Flyway依赖 4.3、Springboot添加Flyway配置 4.4、创建执行SQL脚本 4.5、启动测试 4.6、Flyway版本管理 5、SQL脚本文件命名规则 6、…
阅读更多...
比特币 ZK 赏金系列：第 2 部分——查找哈希冲突

比特币 ZK 赏金系列：第 2 部分——查找哈希冲突

在我们的零知识赏金 (ZKB) 系列的第二部分中&#xff0c;我们将其应用于解决哈希冲突难题。在这样的谜题中&#xff0c;两个不同的输入散列到相同的输出。此类赏金可用于&#xff1a; 充当煤矿中的金丝雀&#xff0c;给我们一个有价值的提醒。存在冲突是散列函数较弱的标志&…
阅读更多...
LCP 06. 拿硬币【向上取整】

LCP 06. 拿硬币【向上取整】

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;贪心 知识回顾向上、向下取整 写在最后 Tag 【贪心】【数组】 题目来源 LCP 06. 拿硬币 题目解读 数组 coins 中存放的是一堆堆的力扣币&#xff0c;对于每一堆力扣币&#xff0c;你可以选择拿走一枚或者两枚&#x…
阅读更多...
SOCKS5 认证的方法

SOCKS5 认证的方法

在进行网络浏览或爬虫等相关工作时&#xff0c;我们经常会遇到需要使用 SOCKS5 代理认证的情况。然而&#xff0c;某些浏览器可能不提供原生支持 SOCKS5 代理认证的选项&#xff0c;给我们带来了一些困扰。本文将为大家介绍几种解决浏览器不支持 SOCKS5 代理认证问题的方法。 …
阅读更多...
java图形化工具编写初试

java图形化工具编写初试

java图形化工具编写初试 前言&#xff1a; 照虎画猫——用WgpSec 说书人师傅的‘用友NC系列检测利用工具’结合本人为数不多的java基础再结合gpt&#xff0c;学习了一下java图形化工具的编写&#xff0c;实现了最基础的漏洞检测功能........用大华的两个漏洞为例&#xff0c;分…
阅读更多...
kafka消费/发送消息，消息过大报错解决whose size is larger than the fetch size 1048576

kafka消费/发送消息，消息过大报错解决whose size is larger than the fetch size 1048576

目录 一、kafka消费报错原因二、解决方案1、原因一的解决方案2、原因二的解决方案 一、kafka消费报错原因 问题原因一&#xff1a;个是kafka本身的配置没有调整到上限 问题原因二&#xff1a;就是我们自己写python消费kafka代码的时候没有参数配置没有限制 RecordTooLargeE…
阅读更多...
实践分享：vue模块化基本用法

实践分享：vue模块化基本用法

首先还是来看看什么是模块化。 常见的概括&#xff1a;模块化就是把单独的一个功能封装到一个模块&#xff08;文件&#xff09;中&#xff0c;模块之间相互隔离&#xff0c;但是可以通过特定的接口公开内部成员&#xff0c;也可以依赖别的模块&#xff08;方便代码的重用&…
阅读更多...
Zotero配合dblp文献库免费一键下载文献及管理教程

Zotero配合dblp文献库免费一键下载文献及管理教程

Zotero配合dblp文献库免费一键下载文献及管理教程 1 dblp计算机科学文献库2 文献导入到Zotero教程参考&#xff1a; 在这里&#xff0c;相信大家都已经知道Zotero这个强大的文献管理软件了&#xff0c;它可以多端同步&#xff0c;自动下载文献&#xff0c;自定义标签&#xff0…
阅读更多...
数据结构——排序算法——归并排序

数据结构——排序算法——归并排序

将两个有序数组合并为一个有序数组 在第二个列表向第一个列表逐个插入的过程中&#xff0c;由于第二个列表已经有序&#xff0c;所以后续插入的元素一定不会在前面插入的元素之前。在逐个插入的过程中&#xff0c;每次插入时&#xff0c;只需要从上次插入的位置开始&#xff0…
阅读更多...
Pytorch从零开始实战04

Pytorch从零开始实战04

Pytorch从零开始实战——猴痘病识别 本系列来源于365天深度学习训练营 原作者K同学 文章目录 Pytorch从零开始实战——猴痘病识别环境准备数据集模型选择模型训练数据可视化其他模型图片预测 环境准备 本文基于Jupyter notebook&#xff0c;使用Python3.8&#xff0c;Pytor…
阅读更多...
mysql用事务实现更新数据

mysql用事务实现更新数据

前言&#xff1a;在手动批量更新正式环境数据库时&#xff0c;建议使用事物进行更新&#xff0c;避免更错数据&#xff0c;造成不必要的麻烦。 现表中有三条数据&#xff0c;使用事物批量将name字段为mgx&#xff0c;phone字段为17837107346&#xff0c;所有数据中的address字段…
阅读更多...
华为云云耀云服务器L实例评测｜服务器反挖矿防护指南

华为云云耀云服务器L实例评测｜服务器反挖矿防护指南

前言 本文为华为云云耀云服务器L实例测评文章&#xff0c;测评内容是 云耀云服务器L实例 反挖矿防护指南 系统配置&#xff1a;2核2G 3M CentOS7.9 之前的文章中『一文教你如何防御数据库恶意攻击』&#xff0c;我们讲到黑客如何通过攻击数据库来获取权限&#xff0c;以及我们…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023