vue模板语法（上）

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

一、插值

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' : 'NO' }}

          <li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

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>
		<style>
			.a{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p>文本</p>
			<h3>{{msg}}</h3><br />

			<p>html串</p>
			<h3 v-html="htmlchuan"></h3><br />

			<p>vue中的属性</p>
			<a v-bind:href="shux">点我</a>
			<input :value="valuestr" /><br />

			<p>表达式</p>
			{{str.substr(0,6).toUpperCase()}}
			{{ number + 1 }}
			{{ ok ? 'YES' : 'NO' }}
			<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
			<br />
			
			<p> class绑定</p>
			<span :class="expression">look Me zai</span>
			
			<p>style绑定</p>
			<span :style="expressions">look Me zai</span>
			
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					msg: 'vue666',
					htmlchuan: 'vue-html',
					shux: 'http://baidu.com',
					valuestr: 'vue属性',
					str:'看星河',
					number:69,
					ok:false,
					id:66,
					expression:'a',
					expressions:'color:red;'
				};
			}
		})
	</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">
			
			<h2><p>v-if</p></h2>
			<!-- 60分下不及格、 60-70分合格、70-80分良、80-90分优、90-100分为完美 -->
			请输入分数：<input v-model="socre"/>
			对应结果：
			<span v-if="socre<60">不及格</span>
			<span v-else-if="socre<70">合格</span>
			<span v-else-if="socre<80">良好</span>
			<span v-else-if="socre<90">优秀</span>
			<span v-else-if="socre<=100">完美</span>
			<span v-else="">输入不合法</span>
			<br />
			<h2><p>v-show</p></h2>
			<div v-show="socre>90">v-show-上优秀学员名单</div>
			<div v-if="socre<90">v-if-上优秀学员名单</div>
			<br />
			<h2><p>v-for</p></h2>
			<select >
				<option v-for="h in hobby" :value="h.id">{{h.name}}</option>
			</select>
			<div v-for="h in hobby">
				<input type="checkbox" :value="h.id"/>{{h.name}}
			</div>
		</div>
		
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data(){
				return{
					socre:0,
					hobby:[
						{id:"1",name:"打游戏"},
						{id:"2",name:"篮球"},
						{id:"3",name:"rap"}
					],
				}
			}
		})
	</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"></div>

注1：过滤器函数接受表达式的值作为第一个参数

注2：过滤器可以串联     

{{ message | filterA | filterB }}

注3：过滤器是JavaScript函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

注4：js定义一个类

function Stu(){};

Stu.prototype.add(a,b){};//添加一个新的实例方法

Stu.update(a,b){};//添加一个新的类方法

代码：

<!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(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>
			<table border="1" style="width: 500px;height: 200px;">
				<tr>
					<td>帽子</td>
					<td>20</td>
					<td>
						<input v-model="mz" />
					</td>
					<td>
						{{mzxj}}
					</td>
				</tr>
				<tr>
					<td>衣服</td>
					<td>250</td>
					<td>
						<input v-model="yf" />
					</td>
					
					<td>
						{{yfxj}}
					</td>
				</tr>
				<tr>
					<td>裤子</td>
					<td>150</td>
					<td>
						<input v-model="kz" />
					</td>
					<td>
						{{kzxj}}
					</td>
				</tr>
				<tr>
					<td>总价</td>
					<td colspan="3"></td>
					<td>
						{{zj}}
					</td>
				</tr>
			</table>
			
			<p>监听属性</p>
			千米：<input v-model="km" />
			米：<input v-model="m" />
			<br />
			
			</table>
			
		</div>

	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					mz:1,
					yf:1,
					kz:1,
					km:2,
					m:2000
				};
			},
			methods:{
				handle(){
					alert("触发事件");
				}
			},
			computed:{
				mzxj(){
					return this.mz*30;
				},
				yfxj(){
					return this.yf*250;
				},
				kzxj(){
					return this.kz*150;
				},
				zj(){
				  return this.mzxj+this.yfxj+this.kzxj;
				}
			},
			watch:{
				m:function(v){
					this.km = parseInt(v)/1000;
				},
				km:function(v){
					this.m = parseInt(v)*1000;
				}
			}
		})
	</script>
</html>

 

糖心何包蛋·
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue模板语法
yzq102873的博客
09-02 858
vue模板语法
Vue模板语法
qq_62331938的博客
09-02 2467
本篇文章将要分享的内容为Vue的模板语法。
vue基础语法
kiki208418895的博客
09-18 187
模板语法 插值：.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...
Vue模板语法（一）
P_YUX的博客
08-25 811
1. 模板语法 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 插值案例 代码： <head> <meta charset="utf-8"> <title>...
Vue基础语法
yingxiaobai的博客
03-04 383
笔记 1.模板语法 Mustanche语法：{{msg}} Html赋值： v-html=" " 绑定属性： v-bind:id=" " 使用表达式：{{ok?‘YES’:‘NO’}} 文本赋值：v-test=“ ” 指令：v-if=" " 过滤器：{{message | capitalize}}和v-bind:id = " rawld | formatld " 2.Vue事件处理器 v-o...
前端(十八):Vue模板语法,计算属性
张不帅
06-29 360
文章目录模板语法文本原始 HTMLAttribute计算属性计算属性的 setter 模板语法 文本 通过{{}}来实现数据绑定,但是当标签被设置v-once,数据只会在第一次加载绑定 原始 HTML 双大括号会将数据解释为普通文本,为了输出真正的 HTML，你需要使用 v-html Attribute 通过v-bind来绑定attribute v-on来监听DOM事件 v-bind的缩写: <a v-bind:href="url">...</a> 等同 <a :href="u
Vue框架---Vue模板语法（一）
鑫709的博客
04-27 1106
模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上 插入 文本 数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值： <script src="js/vue.js" type="text/javascr
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解 Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，...
Vue.js的模板语法详解
10-15
Vue.js 是一款流行的前端JavaScript框架，它通过使用简洁的模板语法，使得开发者能够声明式地将数据渲染进DOM中，实现数据和视图之间的动态同步。Vue.js模板语法的设计借鉴了Angular.js和Knockout.js等框架，并简化...
从零开始学VUE之模板语法(计算属性)
彼岸舞的博客
05-31 100
计算属性 setter与getter 使用计算属性简化 表达式操作,实现复用,一般计算属性都是只用getter的,一般不适用setter <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&g...
Vue3一学就会系列：02 模板语法与计算属性
成茂峰
01-09 601
以上就是今天的内容，本文仅仅简单介绍了vue3的模板语法及计算属性，而更多的vue3知识，后续文章，我将带大家慢慢深入了解。有问题私信我！！~~
如何在Vue模板中使用计算属性？
2301_77795034的博客
06-04 1185
最后，我们还可以使用计算属性的setter函数来设置计算属性的值。计算属性是一种在Vue组件中使用的属性，它的值是根据其他数据的计算得出的。在Vue中，我们可以使用computed选项来定义计算属性，这个选项接收一个函数或者一个对象，函数或对象中包含我们要计算的属性和它们的值。除了简单的计算，计算属性还可以使用一些内置的函数和方法。在这两个例子中，无论firstName或lastName的值发生任何变化，都会触发更新fullName计算属性的值，从而保证模板中显示的值始终正确。在模板中使用计算属性。
vue3的基础入门03
weixin_45808678的博客
03-15 1109
计算属性 <body> <div id="app"> <p>{{msg}}</p> <!-- 对普通属性进行逻辑处理，然后再展示 --> <!-- <p>{{ msg.toUpperCase().split(' ').reverse().join(' ')}}</p> --> <p>{{ reverseMsg}
Vue学习记录
wang54188a的博客
07-31 234
初学vue，学习记录。目前更新到vue核心，未来将会有以下内容：vue组件化编程、使用vue脚手架、vue中的ajax、vuex、vue-router、vue UI组件库
Vue2 中通过自定义指令将字母转大写
最新发布
程邓楠的博客
03-07 747
Vue2 中通过自定义指令将字母转大写
了解Vue，Vue的基础语法
weixin_67696142的博客
07-14 665
Vue的基础语法
如何在 Vue.js 中将字符串的第一个字母大写
qq_41838305的博客
04-22 782
我们使用括号索引 ([ ]) 来获取字符串的 0 属性 - 索引 0 处的字符。字符串（和数组）索引在 JavaScript 中是从零开始的，因此字符串的第一个字符位于索引 0，第二个字符位于 索引 1，依此类推，直到索引 str.length-1 处的最后一个字符。如果结果字符串只需要首字母大写，您可以在 slice() 的结果上调用 toLowerCase() 方法，在连接之前将字符串的其余部分小写。如果你试图将 Vue 实例的字符串数据属性大写（就像在我们的例子中），你可以使用计算属性代替方法。
vue行间截取字符串
swx999的博客
11-20 937
<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);//截取第二
Vue2 新手上路无处不在的特殊符号，让人傻傻分不清 “:”、“.”、“@”、“#” 、“{{}}“ 、“$“,‘$bus‘,‘$event‘
热门推荐
LlanyW的专栏
12-29 6万+
1）$ mount:vue内部除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。.prevent 阻止浏览器默认行为(@click.prevent="clickFn")：写法：{{xxx}}，xxx 是 js 表达式，可以直接读取到 data 中的所有区域。2）$(形参){方法体}:js的方法名定义规则比较广泛，可以是方法名的定义；.stop 阻止冒泡(@click.stop="clickFn")Vue中有很多的指令，且形式都是 v-xxx， 框架。有参数,就用$event占位,在回调中e接收。
Vue.js模板语法深度解析
在Vue.js中，模板语法是实现数据绑定和响应式更新的关键部分。本篇文章将深入讲解Vue.js的常用模板语法。 1. 文本渲染 在Vue.js中，我们可以使用`{{ }}`插值表达式来实时渲染文本内容。当数据模型发生变化时，这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值