Vue模板语法集（上）

现在是5712023-09-20 14:49

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一起绑定[多选]复选框和单选框

使用：

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>
		<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属性的值。

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>
		<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表达式的尾部，使用管道运算符 " | "

局部过滤器

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>
		<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>

全局过滤器

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

html 复制代码 
//给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.计算属性监听属性

计算属性

html 复制代码 
<!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

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

监听属性：

html 复制代码 
<!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>

效果：

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

实战案例：

购物车：

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>

效果：

相关推荐
码界奇点2 分钟前
Java Web学习 第1篇前端基石HTML 入门与核心概念解析
java·前端·学习·xhtml
云枫晖7 分钟前
Webpack系列-开发环境
前端·webpack
Rverdoser12 分钟前
制作网站的价格一般由什么组成
前端·git·github
拉不动的猪12 分钟前
深入理解 JavaScript 中的静态属性、原型属性与实例属性
前端·javascript·面试
linda261820 分钟前
链接形式与跳转逻辑总览
前端·javascript
怪可爱的地球人25 分钟前
骨架屏
前端
用户6778471506228 分钟前
前端将html导出为word文件
前端
前端付豪30 分钟前
如何使用 Vuex 设计你的数据流
前端·javascript·vue.js
李雨泽32 分钟前
通过 Prisma 将结构推送到数据库
前端
前端小万37 分钟前
使用 AI 开发一款聊天工具
前端·全栈
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04《大数据技术原理与应用》实验报告三 熟悉HBase常用操作05Linux下V2Ray安装配置指南06GitLab 零基础入门指南：从安装到项目管理全流程07NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09jdk21下载、安装（Windows、Linux、macOS）10在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）