Vue中的Mustache插值语法、v-bind指令怎么使用
本篇内容介绍了“Vue中的Mustache插值语法、v-bind指令怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
目前创新互联建站已为上千多家的企业提供了网站建设、域名、网页空间、网站托管维护、企业网站设计、通化县网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
一、Mustache插值语法
⭐⭐mustache 语法: 是"胡子"的意思, 据说是因为嵌入标记像胡子 {{}}(我觉得一点也不像哎O(∩_∩)O哈哈~)
把数据显示到模板(template)中,使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值
data返回的对象是有添加到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