首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
10.1 注册自定义指令
10.1.1 全局自定义指令
10.1.2 局部自定义指令
10.2 钩子函数
10.3 绑定值的类型
10.3.1 绑定数值
10.3.2 绑定字符串
10.3.3 绑定对象字面量
11.1 注册组件
11.1.1 注册全局组件
11.1.2 注册局部组件
11.2 向子组件传递数据
11.2.1 Prop基本用法
11.2.2 数据验证
11.3 监听子组件事件
11.3.1 监听自定义事件
11.3.2 监听原生事件
11.4 插槽的使用
11.4.1 基础用法
11.4.2 编译作用域
11.4.3 默认内容
11.4.4 命名插槽
11.4.5 作用域插槽
11.5 混入
11.5.1 基础用法
11.5.2 选项合并
11.6 动态组件
11.6.1 动态组件的用法
11.6.2 缓存效果
12.1 什么是组合API
12.2 setup()函数
12.3 响应式API
12.3.1 reactive()方法
12.3.2 watchEffect()方法
12.3.3 ref()方法
12.3.4 computed()方法
12.3.5 watch()方法
12.4 生命周期钩子函数
12.5 使用ref获取DOM元素
13.1 单元素过渡
13.1.1 CSS过渡
13.1.2 过渡的类名
13.1.3 自定义过渡的类名
13.1.4 CSS动画
13.1.5 使用JavaScript钩子函数实现动画
13.2 多元素过渡
13.2.1 多元素过渡的用法
13.2.2 设置元素的key属性
13.2.3 过渡模式的设置
13.3 多组件过渡
13.4 列表过渡
14.1 什么是虚拟DOM
14.2 render()函数的使用
14.2.1 基本用法
14.2.2 h()函数
14.3 使用JavaScript代替模板功能
15.1 路由基础
15.1.1 引入Vue Router
15.1.2 基本用法
15.1.3 动态路由匹配
15.1.4 命名路由
15.2 编程式导航
15.3 嵌套路由
15.4 命名视图
15.5 高级用法
15.5.1 beforeEach钩子函数
15.5.2 scrollBehavior方法
当前位置:
首页>>
技术小册>>
Vue.js从入门到精通(三)
小册名称：Vue.js从入门到精通(三)
### 10.3.1 绑定数值 在Vue.js的广阔世界中，数据的绑定是构建动态、响应式界面的基石。特别是数值的绑定，它允许开发者将Vue实例中的数据直接映射到视图上，当这些数据发生变化时，视图也会自动更新，无需手动操作DOM。这一特性极大地简化了数据管理与界面渲染之间的同步工作，提高了开发效率和应用的维护性。本章将深入探讨Vue.js中数值绑定的各种方式、应用场景以及最佳实践。 #### 10.3.1.1 基础数值绑定 Vue.js提供了多种方式来绑定数值到视图上，但最基本且最常用的方式是通过`v-bind`指令（在HTML属性绑定时通常简写为`:`）或直接在模板表达式中使用JavaScript表达式。然而，对于简单的数值展示，我们更多地是直接使用插值表达式`{{ }}`。 **示例**： ```html <template> <div> <p>当前计数：{{ count }}</p> <!-- 使用v-bind绑定数值到属性，虽然不常见，但展示其灵活性 --> <input type="number" :value="count" disabled> </div> </template> <script> export default { data() { return { count: 0 }; } } </script> ``` 在上述示例中，`{{ count }}`用于在`<p>`标签内显示`count`变量的值。虽然`v-bind`常用于绑定HTML属性到表达式，但这里也展示了如何用它来绑定一个`input`元素的`value`属性，尽管在大多数情况下，对于双向绑定数值，我们会使用`v-model`。 #### 10.3.1.2 使用`v-model`进行双向绑定 `v-model`是Vue.js中用于在表单输入和应用状态之间创建双向数据绑定的指令。虽然`v-model`在内部根据不同类型的表单输入元素（如`text`、`checkbox`、`radio`、`select`等）采用不同的策略，但在处理数值输入时，它表现得尤为直接和高效。 **数值输入的双向绑定**： ```html <template> <div> <p>当前年龄：{{ age }}</p> <input type="number" v-model.number="age" placeholder="请输入年龄"> </div> </template> <script> export default { data() { return { age: 25 }; } } </script> ``` 注意，这里使用了`.number`修饰符。因为默认情况下，`v-model`在`<input type="number">`上绑定时，会将用户的输入作为字符串处理。使用`.number`修饰符后，Vue会尝试将输入转换为数值类型。 #### 10.3.1.3 数值计算与显示 在Vue.js中，除了直接绑定数值外，还经常需要对这些数值进行计算后再展示。这可以通过在组件的`computed`属性中定义计算属性来实现。计算属性是基于它们的依赖进行缓存的，只有当相关依赖发生改变时才会重新求值。 **示例：计算折扣后的价格**： ```html <template> <div> <p>原价：{{ price }}</p> <p>折扣：{{ discount }}</p> <p>最终价格：{{ finalPrice }}</p> </div> </template> <script> export default { data() { return { price: 100, discount: 0.2 // 20% off }; }, computed: { finalPrice() { return this.price * (1 - this.discount); } } } </script> ``` 在这个例子中，`finalPrice`是一个计算属性，它依赖于`price`和`discount`两个数据属性。每当这两个属性中的任何一个发生变化时，`finalPrice`都会重新计算并更新视图。 #### 10.3.1.4 数值的格式化显示 有时，我们可能需要将数值以特定的格式展示给用户，比如货币格式、百分比或固定小数点位数等。Vue.js本身不提供内置的数值格式化功能，但我们可以利用`computed`属性、方法或过滤器（filters，尽管在Vue 3中已不推荐使用过滤器进行文本格式化）来实现。 **使用`computed`属性格式化货币**： ```html <template> <div> <p>金额（格式化前）：{{ amount }}</p> <p>金额（格式化后）：{{ formattedAmount }}</p> </div> </template> <script> export default { data() { return { amount: 123456.789 }; }, computed: { formattedAmount() { return this.amount.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); } } } </script> ``` 这里，`formattedAmount`计算属性使用JavaScript的`toFixed`方法将金额保留两位小数，并通过正则表达式将千位分隔符添加到数字中，实现了一个简单的货币格式化功能。 #### 10.3.1.5 注意事项与最佳实践 - **避免在模板中直接进行复杂计算**：虽然Vue允许在模板中直接写表达式，但应避免进行复杂的逻辑或计算，因为这会使模板难以理解和维护。推荐使用`computed`属性或方法来处理这类逻辑。 - **合理使用修饰符**：对于`v-model`，了解并合理使用`.number`、`.trim`等修饰符可以简化数据处理工作。 - **考虑性能影响**：虽然Vue的响应式系统非常高效，但过多的计算属性或深度嵌套的数据依赖仍可能影响性能。评估并优化这些依赖关系对于构建高性能应用至关重要。 - **国际化与本地化**：在开发面向全球用户的应用时，考虑数值的国际化与本地化显示（如货币符号、千位分隔符等）是一个重要的方面。 通过以上内容的探讨，我们深入了解了Vue.js中数值绑定的各种方式、应用场景以及实践中的注意事项。掌握这些技能将帮助你在构建动态、响应式的Web应用时更加得心应手。
上一篇：
10.3 绑定值的类型
下一篇：
10.3.2 绑定字符串
该分类下的相关小册推荐：
移动端开发指南
Vue源码完全解析
Vue原理与源码解析
TypeScript和Vue从入门到精通(一)
Vue面试指南
VUE组件基础与实战
Vue3技术解密
TypeScript和Vue从入门到精通(五)
Vue.js从入门到精通(一)
Vue.js从入门到精通(四)
vuejs组件实例与底层原理精讲
TypeScript和Vue从入门到精通(四)
