×
400 028 6601

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

Vue中的Mustache插值语法、v-bind指令怎么使用

本篇内容介绍了“Vue中的Mustache插值语法、v-bind指令怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

目前创新互联建站已为上千多家的企业提供了网站建设、域名、网页空间、网站托管维护、企业网站设计、通化县网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

一、Mustache插值语法

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

⭐⭐
我们可以写：

 
      
{{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用于


      
      切换图片
      
      
      
      百度一下
    

2.2.v-bind绑定class

⭐⭐

1、基本绑定class

Hello World

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


我是按钮

3、对象语法的基本使用

我是按钮

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


我是按钮

2.3.v-bind绑定style

⭐⭐

1、普通的html写法

hhh

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

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

hhhh

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

hhhhh

2.4.v-bind绑定属性名

⭐⭐绑定data中的属性名

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


      Hello World
    
    
    
    









0.2234s