标签：样式 -- -o eth erro 命名 nts fail class类
v-bind ： 基本用途是动态更新HTML元素上的属性，比如id、class、src、href、style等
v-on : 绑定事件监听器，做事件交互。v-on+click‘‘、dbclick、keyup、mousemove等
“语法糖”是指在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。
v-bind ----> :
v-on ----> @
<a v-bind:href="url"> 链接 </a> <img v-bind:src=”imgUrl”> <!-- 缩写为 --> <a :href="url">链接</a> <img :src=”imgUrl”>
<!--v- on 可以直接用"@"来缩写--> <button v-on:click="handleClose">点击隐藏</button> <!--缩写为--> <button @click="handleClose">点击隐藏</button>
计算属性
写在computed中。
<div id=”app” > <div :class=”classes”></div> </div> <script> var app =new Vue({ el :‘#app‘, data : { isActive : true , error : null }, computed: { classes : function () { return { active:this.isActive&&!this.error, ‘text-fail‘:this.error&&this.error.type ===‘fail‘ } } } }) </script>
<div id="app"> <div :class="[activeCls,errorCls]"> </div> <script> var app = new Vue({ el:‘#app‘, data:{ activeCls:‘active‘, errorCls:‘error‘ } }) </script> <!--渲染后的结果为：--> <div class="active error"></div>
<!--三元表达式切换class-->
<div class="[isActive?activeCls:‘‘,errorCls]"></div>
<!--对象语法-->
<div class="[{‘active‘:isActive},errorCls]"></div>
绑定内联样式
v-bind:style (即 :style) 可以给元素绑定内联样式，方法与:class类似，也有对象语法和数组语法，直接在元素上写CSS
CSS属性名称使用驼峰命名（fontSize）或短横分割命名（font-size）
内置指令
v-cloak:
标签：样式 -- -o eth erro 命名 nts fail class类
原文地址：https://www.cnblogs.com/helloyoyo/p/11976293.html
