Vue模板语法（一）

最新推荐文章于 2023-03-30 16:59:52 发布
最新推荐文章于 2023-03-30 16:59:52 发布
阅读量136 收藏
点赞数
文章标签： vue 过滤器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhhhhhhhzsw/article/details/108182013
版权

目录

插值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的插值案例</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>文本</h3>
					{{msg}}
				</li>
				<li>
					<h3>html字符串渲染</h3>
					<div v-html="htmlStr"></div>
				</li>
				<li>
					<h3>v-bind属性绑定指令</h3>
					<input type="text" value="22" />
					<input type="text" v-bind:value="age" />
				</li>
				<li>
					<h3>表达式</h3>
					{{str.substr(0,6).toUpperCase()}}
					{{ number + 1 }}
					{{ ok ? 'YES' : 'NO' }}
				<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		//作用将Vue实例挂载到具体的边界,那么这个边界就会被vue这个渐进式的框架所管理
		//注意:边界不能有兄弟标签,边界一定是跟标签
		new Vue({
			el: '#app',
			data: {
				msg: 'hello vue!!!',
				htmlStr: '<span style="color: red;">红了</span>',
				age: 23,
				str:'https://www.baidu.com',
				number:6,
				ok:true,
				id:16
			}
		})
	</script>
</html>

在这里插入图片描述

过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的过滤器案例</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>局部过滤器的注册</h3>
					{{msg}}<br />
					{{msg|a}}<br />
					{{zsw|a}}
				</li>
				<li>
					<h3>局部过滤器的串联</h3>
					{{zsw|a|b}}
					
				</li>
				<li>
					<h3>全局过滤器的注册</h3>
					{{zsw|c}}
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		Vue.filter('c',function(v){
			console.log(v);
			return v.substring(10,16);
		});
		
		new Vue({
			el: '#app',
			data: {
				msg: 'https://www.baidu.com',
				zsw:'https://www.zsw.com'
			},
			filters:{
				//a是过滤器的名字,后面的函数是过滤器的作用
				'a':function(v){
					console.log(v);
					return v.substring(0,16);
				},
				'b':function(v){
					console.log(v);
					return v.substring(5,10);
				}
			}
		})
	</script>
</html>

在这里插入图片描述

计算属性监听属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的计算属性监听属性案例</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>计算属性</h3>
					单价：<input v-model="price" />
					数量：<input v-model="num" />
					总价：{{total}}
				</li>
				<li>
					<h3>监听属性</h3>
					km:<input v-model="km" />
					m:<input v-model="m" />
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				price:16,
				num:1,
				km:1,
				m:1000
			},
			computed:{
				total(){
					return parseInt(this.price) * parseInt(this.num);
				}
			},
			watch:{
				km(v){
					this.m=v *1000;
				},
				m(v){
					this.km=v/1000;
				}
			}
		})
	</script>
</html>

在这里插入图片描述

指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的指令案例</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>分支</h3>
					<div v-if="score > 90">A</div>
					<div v-else-if="score > 80">B</div>
					<div v-else-if="score > 70">C</div>
					<div v-else-if="score > 60">D</div>
					<div v-else="">E</div>
					<input type="text" v-model="score" />
				</li>
				<li>
					<h3>v-show指令</h3>
					<div v-show="flag">出来1</div>
					<!-- 分清楚v-if跟v-show的区别
						v-if：控制的是标签是否打印
						v-show：控制的是标签的样式
					 -->
					 <div v-if="flag">出来2</div>
				</li>
				<li>
					<h3>v-for指令</h3>
					<div v-for="item,index in data1">
						{{item}}~{{index}}<br />
					</div>
					<hr />
					<div v-for="item,index in data2">
						{{item.id}}~{{item.name}}~{{index}}<br />
					</div>
				</li>
				<li>
					<h3>v-动态事件调用</h3>
					<button v-on:[evname]="xxx">动态事件调用</button>
					<input type="text" v-model="evname" />
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		//作用将Vue实例挂载到具体的边界,那么这个边界就会被vue这个渐进式的框架所管理
		//注意:边界不能有兄弟标签,边界一定是跟标签
		new Vue({
			el: '#app',
			data: {
				score:88,
				flag:true,
				data1:[1,3,6,9,14],
				data2:[{
					id:1,
					name:'篮球'
				},
				{
					id:2,
					name:'跳棋'
				},
				{
					id:3,
					name:'军旗'
				}],
				evname:'click'
			},
			methods:{
				xxx(){
					console.log('xxx方法被调用！！！')
				}
			}
		})
	</script>
</html>

在这里插入图片描述

electronic老倒霉蛋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue模板语法
yzq102873的博客
09-02 817
vue模板语法
Vue模板语法
qq_62331938的博客
09-02 2233
本篇文章将要分享的内容为Vue的模板语法。
Vue的模板语法
m0_46176643的博客
04-20 3390
1.3.模板语法 1.3.1效果 第一大类是插值语法：把指定的值放入指定的位置 插值语法往往是用于指定标签体内容(起始标签和结束标签中间所夹着的内容就是一个标签体) 第二大类是指令语法：固定的写法: <h></h> v-bind:是绑定的 意思，它可以给所有的任何一个标签属性动态的去绑定值 简写：v-bind: ====> : 指令语法管理标签属性 总结： Vue模板语法有2大类： 插值语法： 功...
Vue 模板语法-插值
zhanchulan的博客
03-06 613
Vue 的模板语法非常灵活，其中最基础也是最常用的语法就是插值。需要注意的是，在插值语法中，只能使用最基础的 JavaScript 表达式，不能使用语句或控制流语句，例如 if、for 等等。在属性中使用插值语法也很容易，只需要将需要动态更新的数据包裹在 {{ }} 中，然后将整个表达式作为属性的值即可。在指令中使用插值语法和在属性中使用类似，将要动态更新的数据包裹在 {{ }} 中，然后将整个表达式作为指令的值。在文本节点中使用插值语法非常简单，只需要将需要动态更新的数据包裹在 {{ }} 中即可。
Vue模板语法——插值
热门推荐
布小禅的博客
10-31 1万+
Vue具有自己的模板语法，如果你已经有了后端的学习经验，那么你应该知道，在后端框架中具有框架自带的前端语法，比如django就有自带的模板语法，可以直接写在后端，与服务器进行交互。
Vue 模板语法
sinat_38021004的博客
09-09 1410
模板语法 Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。 也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。 模板 template 的三种写法 1. V
vue模板语法是什么？
weixin_66375317的博客
05-05 5880
vue模板语法是什么？
Vue中的模板语法
qq_45954420的博客
03-06 692
一、基础语法 1.{{XXX}} 中的内容要写js表达式 且xxx可以自动读取到data中的所有属性 2.一旦data中的数据发生改变 那么页面中用到该数据的地方会自动更新 注意区分 js表达式 和 js代码（语句） js表达式 ：一个表达式会产生一个值，可以放在任何一个需要值得地方 例如 a a+b demo(1) x === y ? 'a' : 'b' js代码（语句）: if(){} for(){} 二、模板语法 1.插值语法 功能：用于解析标签体内容 写法：{{xxx}},xxx
Vue——模板语法
hulin的博客
03-30 1093
Vue的模板语法
vue一.模板语法
feicongcong的博客
06-21 1095
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值 文本 数据绑定最常见的形式就
vue模板语法-插值详解
08-31
主要介绍了vue模板语法-插值，非常不错，具有参考借鉴价值，需要的朋友参考下
Vue 3模板语法.pdf
02-21
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成...
Vue.js的模板语法详解
10-15
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。这篇文章重点给大家介绍Vue.js的模板语法，感兴趣的朋友跟随小编一起看看吧
Vue模板语法中数据绑定的实例代码
12-29
1.单项数据绑定 ...我们通过 vue 对象修改数据可以直接影响到 DOM 元素，但是，如果直接修改 DOM 元素，却不会影响到 vue 对象的数据；我们把这种现象称为 单向数据绑定 ； 2.双向数据绑定v-mode
01vue模板语法.html
08-30
01vue模板语法.html
day01-Vue模板语法.zip
01-17
day01-Vue模板语法.zip
Vue.js 模板语法
12-13
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值 文本 数据绑定最...
vue语法.rar
08-16
Vue是一款轻量级的渐进式前端框架，主要功能： 1、模板渲染/数据同步 2、组件化、模块化 3、扩展功能：路由 等等 Vue资源： 中文官网：https://cn.vuejs.org/ Github源码：https://github.com/vuejs/vue ...
02-Vue模板基础语法.zip
最新发布
04-06
JavaScript，是一种轻量级的解释型编程语言； jQuery，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互； Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS...
vue模板语法里读取数组的某一项
05-26
在Vue模板语法中，要读取数组的某一项，可以使用以下方式： ``` {{ array[index] }} ``` 其中，array是你要读取的数组名，index是数组中要读取的元素的下标。例如，如果你有一个名为`list`的数组，想要读取第二个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值