五、v-bind对有样式控制的增强-操作style
1.语法
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
2.代码练习
<style> .box { width: 200px; height: 200px; background-color: rgb(187, 150, 156); } </style> <div id="app"> <div class="box"></div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { } }) </script>
3.进度条案例
<style> .progress { height: 25px; width: 400px; border-radius: 15px; background-color: #272425; border: 3px solid #272425; box-sizing: border-box; margin-bottom: 30px; } .inner { width: 50%; height: 20px; border-radius: 10px; text-align: right; position: relative; background-color: #409eff; background-size: 20px 20px; box-sizing: border-box; transition: all 1s; } .inner span { position: absolute; right: -20px; bottom: -25px; } </style> <div id="app"> <div class="progress"> <div class="inner"> <span>50%</span> </div> </div> <button>设置25%</button> <button>设置50%</button> <button>设置75%</button> <button>设置100%</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { } }) </script>
六、v-model在其他表单元素的使用
1.讲解内容：
常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值
它会根据 控件类型 自动选取 正确的方法 来更新元素
输入框 input:text ——> value
文本域 textarea ——> value
复选框 input:checkbox ——> checked
单选框 input:radio ——> checked
下拉菜单 select ——> value
...
2.代码准备
<style> textarea { display: block; width: 240px; height: 100px; margin: 10px 0; } </style> <div id="app"> <h3>小黑学习网</h3>
姓名：
<input type="text"> <br><br>
是否单身：
<input type="checkbox"> <br><br> <!--
前置理解：
1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥
2. value: 给单选框加上 value 属性，用于提交给后台的数据
结合 Vue 使用 → v-model
-->
性别:
<input type="radio">男 <input type="radio">女 <br><br> <!--
前置理解：
1. option 需要设置 value 值，提交给后台
2. select 的 value 值，关联了选中的 option 的 value 值
结合 Vue 使用 → v-model
-->
所在城市:
<select> <option>北京</option> <option>上海</option> <option>成都</option> <option>南京</option> </select> <br><br>
自我描述：
<textarea></textarea> <button>立即注册</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { } }) </script>
七、computed计算属性
1.概念
基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算。
2.语法
- 声明在 computed 配置项中，一个计算属性对应一个函数
- 使用起来和普通属性一样使用 {{ 计算属性名}}
