>首页> IT >

详解Vue中的Mustache插值语法、v-bind指令

时间:2022-10-24 20:54:49       来源:转载
本篇文章给大家介绍一下Vue中的Mustache插值语法、v-bind指令,希望能够给大家提供帮助!

一、Mustache插值语法

⭐⭐mustache 语法: 是\"胡子\"的意思, 据说是因为嵌入标记像胡子 {{}}(我觉得一点也不像哎O(∩_∩)O哈哈~)   把数据显示到模板(template)中,使用最多的语法是 “Mustache”语法 (双大括号)的文本插值


(资料图片)

data返回的对象是有添加到Vue的响应式系统中;(学习视频分享:vue视频教程)当data中的数据发生改变时,对应的内容也会发生更新。Mustache中不仅仅可以是data中的属性,也可以是一个JavaScript的表达式

⭐⭐ 我们可以写:

值表达式三元表达式调用methods中函数

{{message}}

当前计数:{{counter}}

计数双倍:{{counter*2}}

展示的信息:{{info.split(\" \")}}

{{age>=18?\"成年人\" : \"未成年人\"}}

{{formatDate(time)}}

登录后复制

二、v-bind的绑定属性

2.1.v-bind绑定基本属性

⭐⭐   单向绑定v-bind:数据只能从data流向页面

绑定属性我们可以使用v-bind,比如动态绑定a元素的href属性、img元素的src属性

v-bind用于

绑定一个或多个属性值向另一个组件传递props值**(props:相当于一个组件的输入,后面会学习到的)   v-bind:href 可以写为 :href 这就是v-bind的语法糖
\"\" 百度一下
登录后复制

2.2.v-bind绑定class

⭐⭐

1、基本绑定class

Hello World

登录后复制

2、动态class可以写对象语法

登录后复制

3、对象语法的基本使用

登录后复制

4、对象语法的多个键值对,动态绑定的class是可以和普通的class同时的使用

我们可以给v-bind:class一个对象,用以动态的切换class当然,v-bind:class也是可以与普通的class特性共存
登录后复制

2.3.v-bind绑定style

⭐⭐

1、普通的html写法

hhh

登录后复制

2、style中的某些值,来自data中

动态绑定style,在后面跟上对象类型

hhhh

登录后复制

3、动态的绑定属性,这个属性是一个对象

hhhhh

登录后复制

2.4.v-bind绑定属性名

⭐⭐绑定data中的属性名

在属性名不是固定的情况下使用:[属性名]=“值”

Hello World

<script src=\"../lib/vue.js\"></script> <script> const app = Vue.createApp({ data: function () { return { name: \"class\", }; }, }); app.mount(\"#app\");
登录后复制

2.5.v-bind直接绑定对象

⭐⭐传入一个对象,对象来自于data,一个对象的所有属性,绑定到元素上的所有属性

Hello world

<--直接绑定一个对象,一步到位-->

<script src=\"../lib/vue.js\"></script> <script> const app = Vue.createApp({ data: function () { return { infos: { name: \"kk\", age: 18, height: 1.7 }, name: \"kk\", age: 18, height: 1.7, }; }, }); app.mount(\"#app\");
登录后复制

【相关视频教程推荐:vuejs入门教程、web前端入门】

以上就是详解Vue中的Mustache插值语法、v-bind指令的详细内容,更多请关注php中文网其它相关文章!

关键词: 一个对象 动态绑定 所有属性