所属分类：web前端开发
前端（vue）入门到精通课程，老师在线辅导：联系老师
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用
⭐⭐mustache 语法： 是"胡子"的意思, 据说是因为嵌入标记像胡子 {{}}(我觉得一点也不像哎O(∩_∩)O哈哈~)
把数据显示到模板（template）中，使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值
⭐⭐
我们可以写：
微博登录
QQ登录 <div id="app">
<h2>{{message}}</h2>
<h2>当前计数：{{counter}}</h2>
<!-- 2.表达式 -->
<h2>计数双倍：{{counter*2}}</h2>
<h2>展示的信息:{{info.split(" ")}}</h2>
<!-- 3.三元表达式 -->
<h2>{{age>=18?"成年人" : "未成年人"}}</h2>
<!-- 4.调用methods中函数 -->
<h2>{{formatDate(time)}}</h2>
</div>登录后复制⭐⭐
单向绑定v-bind：数据只能从data流向页面
绑定属性我们可以使用v-bind,比如动态绑定a元素的href属性、img元素的src属性
v-bind用于
<div id="app">
<!-- 1.绑定img的src属性 -->
<button @click="switchImage">切换图片</button>
<img v-bind:src="showImgUrl" alt="" />
<!--语法糖 v-bind: = : -->
<!-- 2.绑定a的href属性 -->
<a v-bind:href="href">百度一下</a>
</div>登录后复制⭐⭐
1、基本绑定class
<h2 :class="classes">Hello World</h2>
登录后复制2、动态class可以写对象语法
<button :class="isActive ? 'active':''" @click="btnClick">
我是按钮
</button>
登录后复制3、对象语法的基本使用
<button :class="{active:isActive}" @click="btnclick">我是按钮</button>登录后复制4、对象语法的多个键值对,动态绑定的class是可以和普通的class同时的使用
<button class="abc cba" :class="getDynamicClasses" @click="btnClick">
我是按钮
</button>
登录后复制⭐⭐
1、普通的html写法
<h2 style="color: aqua; font-size: 30px">hhh</h2>
登录后复制2、style中的某些值，来自data中
动态绑定style，在后面跟上对象类型
<h2 v-bind:style="{color:fontColor,fontSize:fontSize}">hhhh</h2>登录后复制3、动态的绑定属性，这个属性是一个对象
<h2 :style="objStyle">hhhhh</h2>
登录后复制⭐⭐绑定data中的属性名
在属性名不是固定的情况下使用:[属性名]=“值”
<div id="app">
<h2 :[name]="aaaa">Hello World</h2>
</div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
name: "class",
};
},
});
app.mount("#app");登录后复制⭐⭐传入一个对象，对象来自于data，一个对象的所有属性，绑定到元素上的所有属性
<div id="app">
<h2 :name="name" :age="age" :height="height">Hello world</h2>
<--直接绑定一个对象，一步到位-->
<h2 v-bind="infos"></h2>
</div>
<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指令的详细内容，更多请关注zzsucai.com其它相关文章！
