第7节 表单输入绑定

html的代码
<div id="app">
        <label>你的爱好：</label>
        <form>
            <input type="checkbox" v-model="hobby" value="听音乐">听音乐
            <input type="checkbox" v-model="hobby" value="爬山">爬山
            <input type="checkbox" v-model="hobby" value="打篮球">打篮球
            <input type="checkbox" v-model="hobby" value="踢足球">踢足球
        </form>
        <div>
            {{hobby}}
        </div>
        <div>
            <label>记住密码：</label>
            <input type="checkbox" v-model="remeber"> {{remeber}}
        </div>
        <div>
            <label>性别：</label>
            <input type="radio" v-model="sex" value="男">男
            <input type="radio" v-model="sex" value="女">女
            <p>{{sex}}</p>
        </div>
        <div>
            <label>你的专业:</label>
            <select v-model="project">
                <option value="C#">C#</option>
                <option value="java">java</option>
                <option value="web前端">web前端</option>
                <option value="大数据">大数据</option>
            </select>
        </div>
        <div>{{project}}</div>
    </div>
js代码
 var vm = new Vue({
            el: "#app",
            data: {
                hobby: ["听音乐"],
                remeber: false,
                sex: "男",
                project: "java",
            }
    })

第8节 Class 与 Style 绑定

1.绑定 HTML Class

1.1对象语法 

多个类样式 v-bind:class="{ active: isActive, 'text-danger': hasError }"

注意：类名有中横杆用引号括起，例如 'text-danger'，这是js命名规则决定的。

{font-size:23} //错误
{'font-size':23} //正确
{fontSize:23} //正确

1.1.1对象定义在data上
<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

对象定义在计算属性上
<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

1.2数组语法

单个元素的数组
<div v-bind:class="[activeClass, errorClass]"></div>

data: {
 activeClass: 'active',
 errorClass: 'text-danger'
}

渲染为：

<div class="active text-danger"></div>

如果你也想根据条件切换列表中的 class，可以用三元表达式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

对象数组（常用）结合了对象和数组的特点，更加的灵活。
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
 

2.绑定内联样式- v-bind:style

2.1对象语法

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
 activeColor: 'red',
 fontSize: 30
}
font-size变成fontSize 去样式名的中横杆采用驼峰命名。

直接绑定到一个样式对象通常更好，这会让模板更清晰：
<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

2.2数组语法 

 v-bind:style="[baseStyles, overridingStyles]"