Vue模板语法（一）

最新推荐文章于 2022-11-10 22:11:25 发布
最新推荐文章于 2022-11-10 22:11:25 发布
阅读量321 收藏 4
点赞数
分类专栏： 前端-Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53151031/article/details/121020053
版权

目录

一、插值

二、指令

三、动态参数

四、过滤器

五、属性

一、插值

          1、文本：(msg):

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>1.文本</p>
			<h3>{{msg}}</h3>

			//<p>2.html串</p>
			
		</div>
		{{msg}}
		<script type="text/javascript">
			//绑定边界
			new Vue({
				el: '#app',
				data() {
					return {
						msg: 'vue初步使用',
						//htmlstr: '<h3 style="color:red">这是一个html片段</h3>'
					}
				}
			})
		</script>
	</body>
</html>

运行结果：

          2、html串：关键字：v-html=“属性”

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>1.文本</p>
			<h3>{{msg}}</h3>
			
			<p>2.html串</p>
			<div v-html="htmlstr">
			</div>
		</div>
 		<script type="text/javascript">
			//绑定边界
			new Vue({
				el: '#app',
				data() {
					return {
						msg: 'vue初步使用',
						htmlstr: '<h3 style="color:red">这是一个html片段</h3>'
					}
				}
			})
		</script>
	</body>
</html>

运行结果：

          3、Vue属性：关键字：v-bind=“属性”，也可以进行缩写：(:)。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>1.文本</p>
			<h3>{{msg}}</h3>
			<hr />

			<p>2.html串</p>
			<div v-html="htmlstr">
			</div>
			<hr />
			<p>3.属性</p>
			<a v-bind:href="hrefstr">百度一下</a>
			<input :value="valuestr"/>
			<hr />
</div>
		<script type="text/javascript">
			//绑定边界
			new Vue({
				el: '#app',
				data() {
					return {
						msg: 'vue初步使用',
						htmlstr: '<h3 style="color:red">这是一个html片段</h3>',
						hrefstr: 'http://www.baidu.com',
						valuestr:'2223 ',
				}
				}
			})
		</script>
	</body>
</html>

 运行结果：

1、点击百度链接可以跳转到百度官网：

2、v-bind缩写版本：在data中定一个valuestr赋一些值，之后用一个文本框（里面写法：value="valuestr"）

           4、表达式：

                 4.1 vue中含有内置函数

代码：同样在data中定义一个str:'java是最牛语言'中文字符串，在边界中{{str.substring(0,4).toUpperCase()}}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>1.文本</p>
			<h3>{{msg}}</h3>
			<hr />

			<p>2.html串</p>
			<div v-html="htmlstr">
			</div>
			<hr />
			<p>3.属性</p>
			<a v-bind:href="hrefstr">百度一下</a>
			<input :value="valuestr"/>
			<hr />
			<p>4.表达式  Vue提供了完全的JavaScript表达式支持</p>
			<p>4.1 vue中含有内置函数/p>
			{{str.substring(0,4).toUpperCase()}}
</div>
		<script type="text/javascript">
			//绑定边界
			new Vue({
				el: '#app',
				data() {
					return {
						msg: 'vue初步使用',
						htmlstr: '<h3 style="color:red">这是一个html片段</h3>',
						hrefstr: 'http://www.baidu.com',
						valuestr:'2223 ',
						str:'java是最牛语言',
	})
		</script>
	</body>
</html>

 运行结果：

                 4.2vue可以支持运算

代码：在data中定义一个数字，在边界中写好{{ number + 1 }}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>1.文本</p>
			<h3>{{msg}}</h3>
			<hr />

			<p>2.html串</p>
			<div v-html="htmlstr">
			</div>
			<hr />
			<p>3.属性</p>
			<a v-bind:href="hrefstr">百度一下</a>
			<input :value="valuestr"/>
			<hr />
			<p>4.表达式  Vue提供了完全的JavaScript表达式支持</p>
			<p>4.1 vue中含有内置函数/p>
			{{str.substring(0,4).toUpperCase()}}
			<p>4.2vue可以支持运算</p>
			张三:{{number+1}}
</div>
		<script type="text/javascript">
			//绑定边界
			new Vue({
				el: '#app',
				data() {
					return {
						msg: 'vue初步使用',
						htmlstr: '<h3 style="color:red">这是一个html片段</h3>',
						hrefstr: 'http://www.baidu.com',
						valuestr:'2223 ',
						str:'java是最牛语言',
						number:59,
	})
		</script>
	</body>
</html>

运行结果：

                 4.3vue支持三元运算

代码：在data中一个属性赋值为boolean类型，在边界中写好{{ ok ? 'YES' : 'NO' }}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>1.文本</p>
			<h3>{{msg}}</h3>
			<hr />

			<p>2.html串</p>
			<div v-html="htmlstr">
			</div>
			<hr />
			<p>3.属性</p>
			<a v-bind:href="hrefstr">百度一下</a>
			<input :value="valuestr"/>
			<hr />
			<p>4.表达式  Vue提供了完全的JavaScript表达式支持</p>
			<p>4.1 vue中含有内置函数/p>
			{{str.substring(0,4).toUpperCase()}}
			<p>4.2vue可以支持运算</p>
			张三:{{number+1}}
			<p>4.3vue支持三元运算</p>
			{{ok ? 'yes':'no'}}
</div>
		<script type="text/javascript">
			//绑定边界
			new Vue({
				el: '#app',
				data() {
					return {
						msg: 'vue初步使用',
						htmlstr: '<h3 style="color:red">这是一个html片段</h3>',
						hrefstr: 'http://www.baidu.com',
						valuestr:'2223 ',
						str:'java是最牛语言',
						number:59,
					    ok:true,
})
		</script>
	</body>
</html>

 运行结果：

                  4.4vue支持字符串拼接：

代码：在data中定义一个id并赋值，在边界中写好<span :id="'id_'+id">

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>1.文本</p>
			<h3>{{msg}}</h3>
			<hr />

			<p>2.html串</p>
			<div v-html="htmlstr">
			</div>
			<hr />
			<p>3.属性</p>
			<a v-bind:href="hrefstr">百度一下</a>
			<input :value="valuestr"/>
			<hr />
			<p>4.表达式  Vue提供了完全的JavaScript表达式支持</p>
			<p>4.1 vue中含有内置函数/p>
			{{str.substring(0,4).toUpperCase()}}
			<p>4.2vue可以支持运算</p>
			张三:{{number+1}}
			<p>4.3vue支持三元运算</p>
			{{ok ? 'yes':'no'}}
			<p>4.4vue支持字符串拼接</p>
			<span :id="'id_'+id">
			</span> 
			
		</div>
		<script type="text/javascript">
			//绑定边界
			new Vue({
				el: '#app',
				data() {
					return {
						msg: 'vue初步使用',
						htmlstr: '<h3 style="color:red">这是一个html片段</h3>',
						hrefstr: 'http://www.baidu.com',
						valuestr:'2223 ',
						str:'java是最牛语言',
						number:59,
					    ok:true,
						id:19
					}
				}
			})
		</script>
	</body>
</html>

 运行结果：

     

二、指令

          1、v-if|v-else|v-else-if(分支语法)：

代码：在data中定义一个成绩，超过80分为优秀，超过60分为良好，60分之下就为差。

定义一个input绑定score数据(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>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>1.v-if|v-else|v-else-if(分支语法)</p>
			分数：<input v-model="score" />
			<div v-if="score>80">
				优秀
			</div>
			<div v-else-if="score>60">
				良好
			</div>
			<div v-else="score<60">
				还需努力
			</div>
	</div>
		<script type="text/javascript">
			//绑定边界
			new Vue({
				el: '#app',
				data() {
					return {
						msg: 'vue初步使用',
						score: 78,
	})
		</script>
	</body>
</html>

运行结果：

          2、v-show:定义一个输入框，同样条件是score>90,当输入框的成绩大于90就显示出"上优秀就业榜单"小于90就是不显示

代码：

	<p>2.v-show</p>
			<p>2.1v-show与v-if的区别</p>
			<div v-show="score>90">
				上优秀就业榜单
			</div>
			<div v-if="score>90">
				上优秀就业榜单
			</div>

运行结果：

成绩大于90时：

成绩小于90时：将不会显示"上优秀就业榜单"

上述图示 还可以阐释v-if与v-show的区别：

当成绩没有大于90时，两种都不会显示，但是在检查界面中可以看出v-show还是在显示，只是用js隐藏了（dispaly），但是v-if在检查中直接消失。

          3、v-for: 在data中定义一个爱好数组，其中每一个爱好都有编号，以及name。通过遍历hobby数组，将值赋到下拉框中

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>1.v-if|v-else|v-else-if(分支语法)</p>
			分数：<input v-model="score" />
			<div v-if="score>80">
				优秀
			</div>
			<div v-else-if="score>60">
				良好
			</div>
			<div v-else="score<60">
				还需努力
			</div>
			
			<p>2.v-show</p>
			<p>2.1v-show与v-if的区别</p>
			<div v-show="score>90">
				上优秀就业榜单
			</div>
			<div v-if="score>90">
				上优秀就业榜单
			</div>
			
			<p>3.v-for</p>
			<select v-model="hoddyselected">
				<option v-for="h in hobby":value="h.id">{{h.name}}</option>
			</select>
</div>
		<script type="text/javascript">
			//绑定边界
			new Vue({
				el: '#app',
				data() {
					return {
						msg: 'vue初步使用',
						score: 78,
						hobby:[
							{id:1,name:'洗头'},
							{id:2,name:'按摩'},
							{id:3,name:'洗jio'}
						],
})
		</script>
	</body>
</html>

运行效果：

          4、v-for复选框:

代码：

         <p>3.v-for复选框</p>
            <div v-for="h in hobby">
                <input   v-bind:value="h.id"  type=checkbox >{{h.name}}
            </div>

运行结果：

          5、v-on：

代码：

    <p>4.v-on</p>
            <button type="button" v-on:click="handle">触发事件</button>
            <button type="button" @click="handle">触发事件222</button>

(缩写@click="handle") 

<script type="text/javascript">

methods:{
                    handle(){
                        alert("触发事件");
                    }

</script>

运行结果：

三、动态参数

          1、定义：动态参数是指可以在v-on：[定义一个属性]，然后在data里面进行传值就可以实现动态参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>动态参数</p>
			<button type="button" v-on:[evname]="handle">动态参数</button>



		</div>
		<script type="text/javascript">
			//绑定边界
			new Vue({
				el: '#app',
				data(){
					return { 
                    // evname:'click'
					evname:'dblclick'
					}
				},
				methods:{
					handle(){
						alert('动态参数')
					}
					
					
				}
			})
		</script>
	</body>
</html>

运行结果：这里是点击了两下，才触发事件，因为evname为delclick。

四、过滤器：

          1、简介：过滤分为局部过滤和全局过滤，这个概念就好比全局变量和局部变量。

          2、全局过滤器：在script标签中定义过滤器，不是在vue中，在vue的data中定义好msg，最后在边界里面显示出msg：

代码：（注意这里的value是指要被过滤的文字）

    <div id="app">
            <p>全局过滤器</p>
            {{msg}}

    <br>
            {{msg|all}}

<script type="text/javascript">
            Vue.filter('all', function(value) {
                return value.substring(0, 3)
            });
            //绑定边界
            new Vue({
                el: '#app',
                data() {
                    return {
                        msg: "java最牛"
                    };
                },

    })
        </script>
    </body>
</html>

运行效果：

          3、局部过滤器：

局部过滤器和全局过滤器不一样，首先从范围出发，局部过滤器只用于本类，而全局过滤器可以跨类使用，其次两个过滤器的书写代码位置不一样，全局过滤器放在vue外面，而局部过滤器放在vue里面

代码：

    <p>局部过滤器</p>
            {{msg|single}}

<script type="text/javascript">

new Vue({

        filters: {
                    'single': function(val) {
                        return val.substring(0, 3)
                    },
                    'param': function(val, start, end) {
                        return val.substring(start, end)
                    },
                }
            })
        </script>

运行效果：

          4、局部过滤器和全局过滤器同时使用：

代码：

<p>局部过滤器和全局过滤器同时使用</p>
            {{msg|all|single}}

运行结果： 首先先进入到全局过滤器，进入全局过滤器截取从0到3（注意：取头不取尾）的文字，所以字符串经过全局变量器之后变成：jav，之后才进入局部过滤器截取从0到3的文字，出来之后变成jav

          5、过滤器传参：

定义一个param函数用来进行动态传参：

<p>过滤器传参</p>
            {{msg|param(2,3)}}

    <script type="text/javascript">

new Vue({

             'param': function(val, start, end) {
                        return val.substring(start, end)
                    },
                }
            })
        </script>

运行结果：

五、属性

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

          2、计算属性：

我将会用一个购物车实例来讲解计算属性：在边界中要创建一个表格，在data里面要定义好各个物品的数量，里面的数据是动态数据，就是说一个数据会随着另一个数据的改变而改变

代码：

<div id="app">
			<p>计算属性</p>
			<table border="1" style="width:600px;height:300px;">
				<tr>
					<td>帽子</td>
					<td>30</td>
					<td>
						<input v-model="maozi" />
					</td>
					<td>{{maoziTotal}}</td>
				</tr>
				<tr>
					<td>裤子</td>
					<td>190</td>
					<td><input v-model="yifu" /></td>
					<td>{{yifuTotal}}</td>
				</tr>
				<tr>
					<td>领带</td>
					<td>200</td>
					<td><input v-model="lingdai" /></td>
					<td>{{lingdaiTotal}}</td>
				</tr>
				<tr>
					<td>总价</td>
					<td colspan="3">{{Total}}</td>
				</tr>
			</table>
			<p>监听属性</p>
			千米：<input  v-model="km"  />
			米：<input  v-model="m"/>
			
		</div>
<script type="text/javascript">
new Vue({
				el: '#app',
				data() {
					return {
						// evname:'click'
						evname: 'dblclick',
						maozi: 1,
						yifu: 2,
						lingdai: 3,
						km:3,
						m:3000,
					}
				},
computed: {
					maoziTotal() {
						return this.maozi * 30;
					},
					yifuTotal() {
						return this.yifu * 190;
					},
					lingdaiTotal() {
						return this.lingdai * 190;
					},
					Total() {
						return this.maoziTotal + this.yifuTotal + this.lingdaiTotal;
					}
				},
	})
		</script>

 运行结果：

           3、监听属性：

用km和m的换算来讲解这个知识点：

<p>监听属性</p>
            千米：<input  v-model="km"  />
            米：<input  v-model="m"/>

<script type="text/javascript">

watch:{

new Vue({
                    km:function(v){
                        this.m=parseInt(v)*1000;
                    },
                    m:function(v){
                        this.km=parseInt(v)/1000;
                    }
                }
            })

    })
        </script>

注意：km:function(v){
                        this.m=parseInt(v)*1000;
                    },该代码的意思是v为参数，catch用来监听km，之后将km的值除以1000赋值给m，m函数也是一样的

运行结果：

           4、监听属性和计算属性的区别：

                1、计算属性没有在变量中使用，但是在vue边界中使用

<input v-model="maozi" />

                2、监听属性在变量中定义中，而且监听属性的变量是相互影响的

    km:function(v){
                        this.m=parseInt(v)*1000;
                    },
                    m:function(v){
                        this.km=parseInt(v)/1000;
                    }

今天的知识就分享到这里了，希望对你有所帮助。

落日飞行
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue模板语法下
m0_60402568的博客
10-29 61
一、样式绑定 1.1 class绑定 使用方式：v-bind:class="expression" expression的类型：字符串、数组、对象 1.2 style绑定 v-bind:style="expression" expression的类型：字符串、数组、对象 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8">...
vue的模板语法
weixin_45111741的博客
09-17 157
（） 1.插值 1.1 文本 {{msg}} 1.2 获取 HTML片段 使用v-html指令用于输出html代码 1.3 给属性绑值 HTML属性中的值应使用v-bind指令 1.4 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} {{ ok ? ‘YES’ : ‘NO’ }} 我的I...
Vue之模板语法
A2895922320的博客
10-28 417
一：插值 1.文本 <!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> <!--
Vue语法模板（二）
weixin_52639224的博客
10-29 295
一、按键修饰符 1.样式绑定 1.1 class绑定 v-bind:class="expression" expression的类型：字符串、数组、对象 1.2 style绑定 v-bind:style="expression" expression的类型：字符串、数组、对象 具体实现： <!DOCTYPE html> <html> <head> <meta charset="utf-8">...
Vue语法模板（样式绑定，事件处理器，表单，自定义组件，组件通信）
小宝的宝呢的博客
11-01 374
一.样式绑定 1.1 class绑定 v-bind:class="expression" expression的类型：字符串、数组、对象 1.2 style绑定 v-bind:style="expression" expression的类型：字符串、数组、对象 1，将字体变为红色 原始写法 <h3 style="color:red;">{{msg}}</h3> 绑定写法 <h3 v-bind:style=...
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，文本插值是使用 Mustache ...
day01-Vue模板语法.zip
01-17
Vue模板语法是Vue.js的一个核心特性，它允许开发者使用声明式的HTML来描述应用的状态与视图之间的关系。以下是一些关于Vue模板语法的关键知识点： 1. **数据绑定**：Vue使用双大括号`{{ }}`进行文本插值，将数据...
Vue模板语法中数据绑定的实例代码
10-16
在Vue模板语法中，数据绑定是核心特性之一，它允许开发者轻松地将数据模型与DOM元素关联起来，实现视图和数据的同步更新。下面我们将详细讨论Vue模板语法中的数据绑定及其应用。 1. 单向数据绑定 单向数据绑定是...
Vue 3模板语法.pdf
最新发布
02-21
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成...
【Vue】模板语法
qq_57215961的博客
07-02 263
vue中的模板语法有两种： 插值语法、指令语法 用于解析标签体的内容 {{xxx}} xxx是js表达式，可以直接读取到data中的所有属性 用于解析标签 v-html : 显示文本，并解析标签 v-text ：显示文本，不解析标签 v-show ： 显示或隐藏，返回false时，display：none v-if ：渲染或不渲染，条件判断错误时，不渲染页面 v-for
Vue学习笔记（二）[模板语法之内置指令，自定义指令]
yuhaowen的博客
03-18 455
Vue学习笔记（二）[模板语法之内置指令、自定义指令] 往期回顾 Vue学习笔记（一）[模板语法、数据绑定、MVVM模型] 内置指令 v-show 带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 display CSS property。 注意，v-show 不支持 <template> 元素，也不支持 v-else。 <div id="app"> <!-- <div v-show="isShow">你好
Vue框架---Vue模板语法（一）
鑫709的博客
04-27 791
模板语法 Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上 插入 文本 数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值： <script src="js/vue.js" type="text/javascr
vue中的页面标题设置
justdoitttt的博客
04-17 141
vue中的页面标题设置 router文件中的index.js： router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title || 'Coinlog'; } next(); }); 在配置路由时添加meta对象，在其中加入title属性 { path: '/a', name: 'a', component: () => import('./a'),
Vue之模板语法（上）
boy_10的博客
10-29 242
一：插值 1.文本 <!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> <!-- 定
Vue2.0开发之——Vue基础用法-使用JavaScript表达式(18)
我的博客
11-10 602
在vue提供的模板渲染语法中，除了支持绑定简单的数据外，还支持JavaScript表达式的运算{ {ok?more。
了解Vue，Vue的基础语法
weixin_67696142的博客
07-14 642
Vue的基础语法
vue和es6的学习笔记
cccc0906的博客
08-01 599
vue 基础 显示数据 文本显示数据用{{}}，html代码显示数据用v-html指令； 使用js表达式 {{a+1}} {{ok?‘yes’:‘no’}}如果满足ok就显示yes不满足就显示no 指令 v-if控制显示隐藏: 满足条件就显示，不满足就不显示 v-bind响应式更新 v-on:click点击时间 动态参数：可以用方括号括起来的 JavaScript 表达式作为一个指令的参数 组件 组件的复用 一个组件的date选项必须是一
笔记01-如何创建一个vue3的项目
m0_46103359的博客
05-07 300
vue3创建
vue模板语法里读取数组的某一项
05-26
在Vue模板语法中，要读取数组的某一项，可以使用以下方式： ``` {{ array[index] }} ``` 其中，array是你要读取的数组名，index是数组中要读取的元素的下标。例如，如果你有一个名为`list`的数组，想要读取第二个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值