Vue模板语法（一）

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

目录

一、插值 

 二、指令

​三、动态参数

 四、过滤器

五、计算属性&监听属性

一、插值 

1.1文本{msg}

 示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- vue的相关依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界   Es6的具体体现 -->
		<div id="app">
			<p>文本</p>
			<h3>{{msg}}</h3>
			<p>html串</p>
			<div v-html="htmlstr">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界
		new Vue({
			el: '#app',
			data() {
				return {
					// ctrl+k格式化
					msg: 'vue你大爷',
					htmlstr: '<h3 style="color:red;">这是一个html片段</h3>'
				};
			}
		})
	</script>
</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.vue中的属性</p>
			<!-- 所有原生态的属性，要利用vue的变量，都需要在对应的属性前加v-binc -->
			<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中含有内置函数

 Vue提供了完全的JavaScript表达式支持
          {{str.substr(0,6).toUpperCase()}}
          {{ number + 1 }}
          {{ ok ? 'YES' : 'NO' }}
          <li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

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

 运行结果：

 二、指令

指的是带有“v-”前缀的特殊属性

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

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

定义一个input绑定score数据(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-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>
    </body>
    
    <script type="text/javascript">
        <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data() {
                return {
                    score:66
                };
            }
        })
    </script>
</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">v-show-上优秀学员名单</div>
                <div v-if="score>90">v-if-上优秀学员名单</div>

运行结果：

成绩大于90时：

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

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

v-if连div代码都不存在了 ，v-show只是display隐藏掉了 

v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代  码：style="display:none"

 3、v-for：类似JS的遍历

遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

下拉框：hobbySelected被选中的选项——回显，以及可以根据后面的输入框填入的进行下拉框选中

<!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-for</p>    
               <select v-model="hobbySelected">
                    <option v-for="h in hobby" :value="h.id">{{h.name}}</option>
                </select>
                <input v-model="hobbySelected" />
        </div>
    </body>
    
    <script type="text/javascript">
        <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data() {
                return {
                    hobby:[
                        {id:"1",name:"洗头"},
                        {id:"2",name:"洗浴"},
                        {id:"3",name:"洗脚"}
                    ],
                    hobbySelected:3
                };
            }
        })
    </script>
</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(缩写@click="handle") 

代码：

<!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>4.v-on</p>
            <button type="button" v-on:click="handle">触发事件</button>
		 <p>4.v-on	(缩写@click="handle") </p>
            <button type="button" @click="handle">触发事件222</button>
        </div>
    </body>
    
    <script type="text/javascript">
        <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data() {
                return {
                    score:78,
                    hobby:[
                        {id:"1",name:"洗头"},
                        {id:"2",name:"洗浴"},
                        {id:"3",name:"洗脚"}
                    ],
                    hobbySelected:3
                };
            },
            methods:{
                handle(){
                    alert("触发事件");
                }
            }
        })
    </script>
</html>

运行如下： 

三、动态参数

  1、定义：动态参数是指可以在v-on：[定义一个属性]，然后在data里面进行传值就可以实现动态参数（动态参数表达式有一些语法约束，evName无效,evname有效，回避大写）

<!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>3.动态参数</p>
		<button v-on:[evname]="handle">动态参数</button>
        </div>
    </body>
    
    <script type="text/javascript">
        <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data() {
                return {
                // evname:'click'
				 evname:'dblclick'
                 
                };
            },
			methods:{
				handle(){
					alert("触发事件");
				}
			}
        })
    </script>
</html>

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

 四、过滤器

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

1.全局过滤器

  Vue.filter('filterName', function (value) {
     // value 表示要过滤的内容
   });

2、局部过滤器
  new Vue({
     filters:{'filterName':function(value){}}
   });

3、串联
4、过滤器可以传参的

代码：（注意这里的value是指要被过滤的文字，取头不取尾）

<!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|all}},{{msg|single}},{{msg|all|single}},{{msg|param(4,5)}}
        </div>
    </body>
    
    <script type="text/javascript">
    //全局过滤器
        Vue.filter('all', function (value) {
             return value.substring(2,6);
           });
        <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data() {
                return {
                    msg:"java最牛"
                };
            },
            // 局部过滤
            filters:{
                'single':function(val){
                    return val.substring(2,3);
                },
                'param':function(val,start,end){
                    return val.substring(start,end);
                }
            }
        })
    </script>
</html>

五、计算属性&监听属性

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

 2、计算属性:

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

代码：

<!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: 600px;height: 300px;">
                <tr>
                    <td>帽子</td>
                    <td>30</td>
                    <td>
                        <input v-model="maozi" />
                    </td>
                    <td>
                        {{maoziTotal}}
                    </td>
                </tr>
                <tr>
                    <td>鞋子</td>
                    <td>28</td>
                    <td>
                        <input v-model="xiezi" />
                    </td>
                    <td>
                        {{xieziTotal}}
                    </td>
                </tr>
                <tr>
                    <td>裤子</td>
                    <td>12</td>
                    <td>
                        <input v-model="kuzi" />
                    </td>
                    <td>
                        {{kuziTotal}}
                    </td>
                </tr>
                <tr>
                    <td>总价</td>
                    <td colspan="3">{{total}}</td>
                </tr>
            </table>
        <p>监听属性</p>
            千米:<input v-model="km" />
            米:<input v-model="m" />
        </div>
    </body>
    
    <script type="text/javascript">
           <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data() {
                return {
                    maozi:1,
                    xiezi:1,
                    kuzi:1,
                    km:2,
                    m:2000
                };
            },
            methods:{
                handle(){
                    alert("触发事件");
                }
            },
            // 计算属性
             computed:{
                 maoziTotal(){
                     return this.maozi*30;
                 },
                 xieziTotal(){
                     return this.xiezi*28;
                 },
                 kuziTotal(){
                      return this.kuzi*12;
                 },
                 total(){
                     return this.maoziTotal+this.xieziTotal+this.kuziTotal;
                 }
             },
             // 监听属性
             watch:{
                 // v指的是m变量
                 m(v){
                     this.km=parseInt(v)/1000
                 },
                 // v指的是km变量
                 km(v){
                     this.m=parseInt(v)*1000
                 }
             }
        })
    </script>
</html>

运行如下： 

 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
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue之模板语法（上）
boy_10的博客
10-29 244
一：插值 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 {{}} 里面的函数，表达式
Akatsuki233的博客
04-17 8303
{{}} 里的单个表达式 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} {{ fn() }} 这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。 有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。 <...
vue基础——模板语法
Makta
03-18 127
(1) 插值 ​ a.文本 {{ }} ​ b.纯HTML ​ v-html慎用 ，防止XSS,CSRF（ ​ (1) 前端过滤 （前端采用正则将容易注入的字符<等过滤掉） ​ (2) 后台转义( < > 换成 &lt &gt ) ​ ） <a href=javascript:location.href='http://www.baidu.co...
Vue —— 基础（零）（模板语法、数据绑定、el/data写法、MVVM模型）
HuoZhiyan 的博客
03-18 1348
Vue —— 基础（零）（模板语法、数据绑定、el/data写法、MVVM模型）
Vue2.0开发之——Vue基础用法-使用JavaScript表达式(18)
我的博客
11-10 614
在vue提供的模板渲染语法中，除了支持绑定简单的数据外，还支持JavaScript表达式的运算{ {ok?more。
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，文本插值是使用 Mustache ...
Vue 3模板语法.pdf
最新发布
02-21
Vue.js的模板语法为开发者提供了一种简单、直观的方式来构建交互式的Web应用。它不仅支持基本的文本插值和属性绑定，还提供了许多高级功能，如条件渲染、列表渲染和自定义指令等。通过深入理解这些概念和技术，...
Vue.js的模板语法详解
10-15
Vue.js 是一款流行的前端JavaScript框架，它通过使用简洁的模板语法，使得开发者能够声明式地将数据渲染进DOM中，实现数据和视图之间的动态同步。Vue.js模板语法的设计借鉴了Angular.js和Knockout.js等框架，并简化...
day01-Vue模板语法.zip
01-17
Vue模板语法是Vue.js的一个核心特性，它允许开发者使用声明式的HTML来描述应用的状态与视图之间的关系。以下是一些关于Vue模板语法的关键知识点： 1. **数据绑定**：Vue使用双大括号`{{ }}`进行文本插值，将数据...
了解Vue，Vue的基础语法
weixin_67696142的博客
07-14 648
Vue的基础语法
vue和es6的学习笔记
cccc0906的博客
08-01 613
vue 基础 显示数据 文本显示数据用{{}}，html代码显示数据用v-html指令； 使用js表达式 {{a+1}} {{ok?‘yes’:‘no’}}如果满足ok就显示yes不满足就显示no 指令 v-if控制显示隐藏: 满足条件就显示，不满足就不显示 v-bind响应式更新 v-on:click点击时间 动态参数：可以用方括号括起来的 JavaScript 表达式作为一个指令的参数 组件 组件的复用 一个组件的date选项必须是一
Vue.js备忘记录(二) {{}}, 指令 ,v-bind, watch监听浏览器本地存储, 路由状态切换
finedayforu的博客
10-22 667
一. 模板语法 1. 文本 <span>Message: {{ msg }}</span> msg属性发生了改变，插值处的内容都会更新。 如果只想更新一次: v-once <span v-once>这个将不会改变: {{ msg }}</span> 2. HTML 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要...
Vue语法模板（一）
weixin_52639224的博客
10-28 190
一、插值 文本：{{msg}} html：使用v-html指令用于输出html代码 属性：HTML属性中的值应使用v-bind指令 表达式：Vue提供了完全的JavaScript表达式支持 如： {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} <li v-bind:id="'list-' + id">我的...
Vue:使用JavaScript 表达式
weixin_30443813的博客
04-26 396
对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div&gt...
VUE 基础语法
weixin_30734435的博客
05-22 168
<script> //构造器 new Vue({ el: "#apps", data: { MSG: 'THIS IS A TEST Pages', h2test: '<h5>this.page is h2 tes...
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模板语法里读取数组的某一项
05-26
在Vue模板语法中，要读取数组的某一项，可以使用以下方式： ``` {{ array[index] }} ``` 其中，array是你要读取的数组名，index是数组中要读取的元素的下标。例如，如果你有一个名为`list`的数组，想要读取第二个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值