动态样式绑定
8.1、class样式绑定
- 对象语法（
用于控制开关切换）
<style> /* CSS片段 */ .active { color: red; } </style> <!-- HTML片段 --> <div v-bind:class="{active: isActive}">class样式</div> <script type='text/javascript'> // JavaScript片段 data: { isActive: true } </script>
- 数组写法
<style> /* CSS片段 */ .active { color: red; } </style> <!-- HTML片段 --> <div v-bind:class="[activeClass]">数组写法</div> <script type='text/javascript'> // JavaScript片段 data: { activeClass: 'active' } </script>
8.2、style样式处理
- 对象语法
<!-- HTML片段 --> <div:style="{color: redColor, fontSize: '20px'}">对象写法</div> <script type='text/javascript'> // JavaScript片段 data: { redColor: 'red' } </script>
- 数组语法
<!-- HTML片段 --> <div v-bind:style="[color, fontSize]">数组写法</div> <script type='text/javascript'> // JavaScript片段 data: { color: { color: 'red' }, fontSize: { 'font-size': '20px' } } </script>
v-model
作用:表单元素的绑定，实现了双向数据绑定，通过表单项可以更改数据。
v-model会忽略所有表单元素的value、checked、selected特性的初始值,而总是将Vue实例的数据作为数据来源，应该在data选项中声明初始值。
- 普通文本框上的使用
<div id='app'> <p>{{message}}</p> <input type='text' v-model='message'> <!-- v-model其实是`语法糖`,它是下面这种写法的简写 语法糖：这种语法对语言的功能并没有影响，但是更方便程序员使用 --> <input type='text' :value='msg' @input='msg=$event.target.value'/> </div> <script type='text/javascript'> new Vue({ el: '#app', data: { msg: 'message默认值' } }) </script>
<div id='app'> <textarea v-model="message"></textarea> </div> <script type='text/javascript'> new Vue({ el: '#app', data: { message: '我是多行文本内容' } }) </script>
注意：在多行文本框中使用插值表达式无效（此时，其只能接受数据，不能改变数据）
- 单个复选框上的使用
<div id='app'> <input type="checkbox" v-model="checked"> </div> <script type='text/javascript'> new Vue({ el: '#app', data:{ checked:true } }) </script>
- 多个复选框上的使用
<div id='app'> <input type="checkbox" value="html" v-model="checkedNames"> <input type="checkbox" value="css" v-model="checkedNames"> <input type="checkbox" value="js" v-model="checkedNames"> </div> <script type='text/javascript'> new Vue({ el: '#app', data:{ // 如果数组中有对应的value值，则此checkbox会被选中 checkedNames:[] } }) </script>
注意：此种用法需要input标签提供value属性，并且需要注意属性的大小写要与数组元素的大小写一致
- 单选按钮上的使用
<div id='app'> 男<input type="radio" name="sex" value="男" v-model="sex"> 女<input type="radio" name="sex" value="女" v-model="sex"> </div> <script type='text/javascript'> new Vue({ el: '#app', data: { sex: '女' } }) </script>
- 下拉框上的使用
<div id='app'> <select v-model="selected"> <option>请选择</option> <option>HTML</option> <option>CSS</option> <option>JS</option> </select> </div> <script type='text/javascript'> new Vue({ el: '#app', data: { selected: 'JS' } }) </script>
- 修饰符
.lazy：默认情况下Vue的数据同步采用input事件，使用.lazy将其修改为失去焦点时触发
.number：自动将用户的输入值转为数值类型（如果能转的话）
.trim：自动过滤用户输入的首尾空白字符
