4、class与style绑定

 

 

普通的字符串方式

<p :class="class1" >字符串表达式</p>

 

 

对象语法

v-bind:class 指令也可以与普通的 class attribute 共存。当有如下模板：

 

<p class="idl" :class="{delete:isActive,error:hasError}">对象语法格式</p>
<p class="idl" :class="classObject">对象语法格式2</p>

 data: {

                class1: 'active',

                class2: 'error',

                isActive: true,

                hasError: false,

                classObject: { 'delete': true, 'error': false }

            },

 

我们也可以在对象语法格式2中绑定一个返回对象的计算属性。这是一个常用且强大的模式

 

 

 

数组语法

<div v-bind:class="[class1, class2]">数组语法方式一</div>

渲染为：

<div v-bind:class="active error">

<div v-bind:class="[isActive？active：'', error]">数组语法方式__三元运算符</div>

 

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

<div v-bind:class="[{ active: isActive }, error]"></div>

 

绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

同样的，对象语法常常结合返回对象的计算属性使用。

 

 

el:

　　<input type="text" class="idl" :class="class2" value="字符串样式绑定">

       <input type="text" class="idl" :class="{error:isError,delete:isDelete}" value="对象样式绑定">

       <input type="text" class="idl" :class="classObj" value="对象样式绑定1">

       <input type="text" class="idl" :class="classObj1" value="对象样式绑定2---计算属性">

       

       <input type="text" :class="['delete','error','idl']" value="数组样式绑定">

       <input type="text" :class="[!isError ? 'delete':'','error','idl']" value="数组样式绑定--三元">

       <input type="text" :class="[{delete:isError},'error','idl']" value="数组样式绑定--对象代替三元">

       <!-- 内联样式 对象方法-->

       <div :style="{color:color,fontStyle,fontWeight}">123</div>