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

上期回顾:Vue简介、引入、命令式和声明式编程

一、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

基本绑定class

Hello World

动态class可以写对象语法


对象语法的基本使用

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

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

 2.3.v-bind绑定style

普通的html写法

hhh

style中的某些值,来自data中

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

hhhh

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

hhhhh

2.4.v-bind绑定属性名

绑定data中的属性名

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

Hello World

你可能感兴趣的:(Vue中Mustache插值语法与v-bind指令详解)