一、Mustache插值语法
⭐⭐mustache 语法： 是\"胡子\"的意思, 据说是因为嵌入标记像胡子 {{}}(我觉得一点也不像哎O(∩_∩)O哈哈~) 把数据显示到模板（template）中，使用最多的语法是 “Mustache”语法 (双大括号)的文本插值
(资料图片)
⭐⭐ 我们可以写：
值表达式三元表达式调用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中文网其它相关文章！
