vue模板语法上集

最新推荐文章于 2024-03-07 17:02:12 发布
最新推荐文章于 2024-03-07 17:02:12 发布
阅读量100 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44247968/article/details/126669985
版权

目录

一、插值

二、指令 

三、过滤器 

四、计算属性&监听属性&购物车案例 

一、插值

1.1.1 文本
{{msg}}
1.1.2 html
使用v-html指令用于输出html代码
1.1.3 属性
HTML属性中的值应使用v-bind指令
1.1.4 表达式
Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}
我的Id是js动态生成的

1.1.5 class绑定
使用方式：v-bind:class=“expression”
expression的类型：字符串、数组、对象
1.1.6 style绑定
v-bind:style=“expression”
expression的类型：字符串、数组、对象
 

<!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>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>文本</p>
			<h3>{{msg}}</h3><br />
			<p>html串</p>
			<div v-html="htmlstr"></div><br />
			<p>vue中的属性</p>
			<!-- 所有原生态属性，要利用vue的变量，都需要在对应的属性前加v_bind -->
			<p v-bind:href="hrefstr">百度</p>
			<input :value="valuestr" />
			<p>表达式</p>
			{{str.substring(0,4).toUpperCase()}}<br />
			张三:{{number+1}}<br />
			{{ok?'yes':'no'}}<br />
			<span :id="'goods_'+id">aa</span>
		</div>
	</body>
	<script type="text/javascript">
		//绑定边界 ES6具体体现
		new Vue({
			el:'#app',
			data(){
				return {
					// ctrl+k格式化
					msg:'hello,vue',
					htmlstr:'<h3 style="color:red;">这是一个html片段</h3>',
					hrefstr:'http://www.baidu.com',
					valuestr:'2223',
					str:'ashdiasd',
					number:59,
					ok:false,
					id:66
				};
			}
		})
	</script>
</html>

二、指令 

指的是带有“v-”前缀的特殊属性
核心指令
(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">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>v-if|v-else|v-slese-if</p>
			分数：<input v-model="score" />
			<div v-if="score>=90">优+</div>
			<div v-else-if="score>=80">优</div>
			<div v-else-if="score>=70">良</div>
			<div v-else-if="score>=60">及格</div>
			<div v-else-if="score<60">不及格</div>
			<div v-else="">请正确输入分数</div>
			<p>v_show</p>
			请输入结果:<input v-model="showflag" />
			<span v-show="showflag">show:展示与否</span>
			<span v-if="showflag">if:展示与否</span>
			<p>v-for</p>
			<select v-model="likesSelected">
				<option v-for="l in likes" :value="l.id">{{l.name}}</option>
			</select>
			<div v-for="l in likes">
				<input :value="l.id" type="checkbox"/>{{l.name}}
			</div>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return {
					score:0,
					likes:[
						{id:"1",name:"足球"},
						{id:"2",name:"篮球"},
						{id:"3",name:"打游戏"}
					],
					likesSelected:3,
					showflag:false
				};
			}
		})
	</script>
</html>

三、过滤器 

过滤器
全局过滤器
Vue.filter(‘filterName’, function (value) {
// value 表示要过滤的内容
});
局部过滤器
new Vue({
filters:{‘filterName’:function(value){}}
});
vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：
< 在两个大括号中 -->
{{ name | capitalize }}
< 在 v-bind 指令中 -->
div v-bind:id=“rawId | formatId”>

注1：过滤器函数接受表达式的值作为第一个参数
注2：过滤器可以串联
{{ message | filterA | filterB }}
注3：过滤器是JavaScript函数，因此可以接受参数：
{{ message | filterA(‘arg1’, arg2) }}
 

<!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>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<!-- {{msg|strSplit}} -->
			<!-- 过滤器的串联 -->
			{{msg|strSplit|strSplit2}}
			<!-- 过滤器传参 -->
			{{msg|strSplit3(2,5)}}
			{{msg|strSplit3(1,4)}}
		</div>
	</body>
	<script type="text/javascript">
		Vue.filter('strSplit',function(value){
			console.log(value);
			return value.substring(0,5);
		})
		Vue.filter('strSplit2',function(value){
			console.log(value);
			return value.substring(3,5);
		})
		Vue.filter('strSplit3',function(value,a,b){
			console.log(value);
			return value.substring(a,b);
		})
		new Vue({
			el:'#app',
			data(){
				return {
					msg:'hello,vue'
				};
			}
		})
	</script>
</html>

四、计算属性&监听属性&购物车案例 

计算属性
计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
computed:{}
监听属性
监听属性 watch，我们可以通过 watch 来响应数据的变化
watch:{}

<!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>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>计算属性</p>
			请输入第一个数:<input v-model="x" /><br />
			请输入第二个数:<input v-model="y" /><br />
			结果为:{{addFlag}}
			<p>监听属性</p>
			请输入第一个数:<input v-model="km" /><br />
			请输入第二个数:<input v-model="m" /><br />
			<p>购物车</p>
			<table>
				<tr>
					<td>物品</td>
					<td>单价</td>
					<td>数量</td>
					<td>小计</td>
				</tr>
				<tr>
					<td>帽子</td>
					<td>{{maoziDanjia}}</td>
					<td>
						<input v-model="maoziShuliang" />
					</td>
					<td>{{maoziXiaoji}}</td>
				</tr>
				<tr>
					<td>衣服</td>
					<td>{{yifuDanjia}}</td>
					<td>
						<input v-model="yifuShuliang" />
					</td>
					<td>{{yifuXiaoji}}</td>
				</tr>
				<tr>
					<td>裤子</td>
					<td>{{kuziDanjia}}</td>
					<td>
						<input v-model="kuziShuliang" />
					</td>
					<td>{{kuziXiaoji}}</td>
				</tr>
				<tr>
					<td>总计</td>
					<td colspan="3">{{zongJia}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return {
					x:0,
					y:0,
					km:0,
					m:0,
					maoziDanjia:20,
					yifuDanjia:3000,
					kuziDanjia:700,
					maoziShuliang:1,
					yifuShuliang:1,
					kuziShuliang:1
				};
			},computed:{
				//计算属性
				addFlag:function(){
					return parseInt(this.x)+parseInt(this.y);
				},
				// 因为数量会影响小计，小计不会影响数量,所有使用计算属性
				maoziXiaoji:function(){
					return parseInt(this.maoziDanjia)*parseInt(this.maoziShuliang);
				},
				yifuXiaoji:function(){
					return parseInt(this.yifuDanjia)*parseInt(this.yifuShuliang);
				},
				kuziXiaoji:function(){
					return parseInt(this.kuziDanjia)*parseInt(this.kuziShuliang);
				},
				zongJia:function(){
					return parseInt(this.yifuXiaoji)+parseInt(this.kuziXiaoji)+parseInt(this.maoziXiaoji);
				}
			},
			watch:{
				km:function(v){
					//:之前对应的是被监听的属性，v指的是被监听的值
					// 当v对应的值发生变化的时候，会执行这个方法
					//v代表是千米
					// debugger;
					this.m=parseInt(v)*1000
				},
				m:function(v){
					this.km=parseInt(v)/1000;
				}
			}
		})
	</script>
</html>

 

Lme1216
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue模板语法-插值详解
08-31
主要介绍了vue模板语法-插值，非常不错，具有参考借鉴价值，需要的朋友参考下
Vue学习笔记（一）
m0_46497350的博客
08-08 552
在维基百科上面的定义是： Vue.js是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。 初识Vue： 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； 3.root容器里的代码被称为【Vue模板】； 4.Vue实例和容器是一一对应的； 5.真实开发中只有一个
vue3的基础入门03
weixin_45808678的博客
03-15 1070
计算属性 <body> <div id="app"> <p>{{msg}}</p> <!-- 对普通属性进行逻辑处理，然后再展示 --> <!-- <p>{{ msg.toUpperCase().split(' ').reverse().join(' ')}}</p> --> <p>{{ reverseMsg}
Vue模板语法（一）
xiaoyi215的博客
09-17 332
Vue模板语法（一） 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} ...
vue基础语法
kiki208418895的博客
09-18 173
模板语法 插值：.html 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} {{ ok ? ‘YES...
Vue2 中通过自定义指令将字母转大写
最新发布
程邓楠的博客
03-07 465
Vue2 中通过自定义指令将字母转大写
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
了解Vue，Vue的基础语法
weixin_67696142的博客
07-14 625
Vue的基础语法
Vue进阶
舞鹤白沙编码日志
04-20 234
1.computed计算属性 在Vue应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂 时，就会变得臃肿甚至难以维护和阅读，比如下面的代码: <div> 写在双括号中的表达式太长了,不利于阅读 {{text.split(',').reverse().join(',')}} </div>. 将这段操作text.split(',').reverse().join(',') 放到计算属性中,最终返回一个结果值就可以 computed...
vue行间截取字符串
swx999的博客
11-20 839
<p>{{item.newsAddTime.slice(11,16)}}</p> // 两个参数 str = str.slice(2,4);//截取第二个到第四个之间的字符 str = str.substring(2,4);//截取第二个到第四个之间的字符 str = str.substr(2,4);//截取从第3个开始往后数4位之间的字符 // 一个参数 str = str.slice(2);//截取第二个之后所有的字符 str = str.substring(2);//截取第二
Vue学习记录
wang54188a的博客
07-31 202
初学vue，学习记录。目前更新到vue核心，未来将会有以下内容：vue组件化编程、使用vue脚手架、vue中的ajax、vuex、vue-router、vue UI组件库
如何在 Vue.js 中将字符串的第一个字母大写
qq_41838305的博客
04-22 690
我们使用括号索引 ([ ]) 来获取字符串的 0 属性 - 索引 0 处的字符。字符串（和数组）索引在 JavaScript 中是从零开始的，因此字符串的第一个字符位于索引 0，第二个字符位于 索引 1，依此类推，直到索引 str.length-1 处的最后一个字符。如果结果字符串只需要首字母大写，您可以在 slice() 的结果上调用 toLowerCase() 方法，在连接之前将字符串的其余部分小写。如果你试图将 Vue 实例的字符串数据属性大写（就像在我们的例子中），你可以使用计算属性代替方法。
Vue2 新手上路无处不在的特殊符号，让人傻傻分不清 “:”、“.”、“@”、“#” 、“{{}}“ 、“$“,‘$bus‘,‘$event‘
热门推荐
LlanyW的专栏
12-29 5万+
1）$ mount:vue内部除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。.prevent 阻止浏览器默认行为(@click.prevent="clickFn")：写法：{{xxx}}，xxx 是 js 表达式，可以直接读取到 data 中的所有区域。2）$(形参){方法体}:js的方法名定义规则比较广泛，可以是方法名的定义；.stop 阻止冒泡(@click.stop="clickFn")Vue中有很多的指令，且形式都是 v-xxx， 框架。有参数,就用$event占位,在回调中e接收。
vue中解决加载数据时闪烁大括号 => {{ }}
qq_41797053的博客
05-23 597
(https://img-blog.csdnimg.cn/20190523153245156.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzk3MDUz,size_16,color_FFFFFF,t_70)
Vue 页面绑值后截取字符串substring()、substr()、slice()
大胖东的博客
03-03 1万+
Vue 页面绑值后截取字符串 一、substring() substring()方法返回一个索引和另一个索引之间的字符串 以下是一些示例代码： var str = 'abcdefghij'; console.log('(1, 2): ' + str.substring(1, 2)); // '(1, 2): b' console.log('(1, 1): ' + str.substring(1, 1)); // '(1, 1): ' console.log('(-3, 2): ' + st
Vue的一些特性
ZhiAng99的博客
09-25 285
文章目录1.自定义指令2.计算属性3.侦听器4.过滤器5.变异方法和替换数组 1.自定义指令 1.基础指令 v-clock 这个指令的意思是点击就会触发这个指令 除了一些vue提供给我们得指令外我们还可以自定义一些指令来方便我们的一些操作 Vue.directive(‘focus’, { //inserted是固定的 是vue的api inserted: function(el){ // el表示指令所绑定的元素 el.focus(); } }); <body> <div id="a
Vue学习笔记(三)：Vue过滤器的基本使用
baidu_38300480的博客
12-28 730
在实际项目中，我们常常需要对文本进行一些格式化操作（例如：日期格式化、字符串大小写转换等），在Vue中我们可以通过自定义过滤器的方式完成这项操作，同时还可以将过滤器注册到全局以提高代码的复用性。基本使用方式如下： 1.在一个组件的选项中定义本地的过滤器 export default { name: 'FilterDemo', data() { return { msg:'hello world' } }, ...
vue模板语法里读取数组的某一项
05-26
在Vue模板语法中，要读取数组的某一项，可以使用以下方式： ``` {{ array[index] }} ``` 其中，array是你要读取的数组名，index是数组中要读取的元素的下标。例如，如果你有一个名为`list`的数组，想要读取第二个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值