网站建设信息安全要求,服务器云平台,西乡建网站公司,vi设计流程3.1 计算属性和监视属性
3.1.1 计算属性 计算属性是一种计算值的方式#xff0c;可以根据其他属性的值来动态地计算新的属性值。计算属性可以缓存计算结果#xff0c;当依赖的属性发生改变时#xff0c;才会重新计算。在Vue中#xff0c;可以使用computed选项来定义计算属…3.1 计算属性和监视属性
3.1.1 计算属性 计算属性是一种计算值的方式可以根据其他属性的值来动态地计算新的属性值。计算属性可以缓存计算结果当依赖的属性发生改变时才会重新计算。在Vue中可以使用computed选项来定义计算属性例如 templatediv{{ fullName }}/div
/templatescript
export default {data() {return {firstName: 张,lastName: 三}},computed: {fullName() {return this.firstName - this.lastName}}
}
/script3.1.2 监视属性 监视属性用于监听一个属性的变化并在变化时执行相应的操作。在Vue中可以使用watch选项来定义监视属性例如 templatediv{{ message }}/div
/templatescript
export default {data() {return {count: 0,message: }},watch: {count(newValue, oldValue) {this.message Count changed from oldValue to newValue}}
}
/script3.1.3 两个属性的异同
相同点 都是处理响应式数据的方法可以实时监控数据变化并做出相应的响应。都可以依赖于其他数据data 中的属性、计算属性、甚至是其他监视属性当这些数据变化时计算属性和监视属性都会重新计算/执行。 不同点 计算属性是根据它的依赖属性data 中的属性、计算属性动态计算而来它会根据依赖属性的变化自动重新计算而监视属性是在某个属性变化时执行一段特定的代码可以用来处理一些复杂的业务逻辑。计算属性可以缓存计算结果当依赖的属性没有发生变化时会直接返回之前缓存的计算结果提高了性能而监视属性不能缓存计算结果每次依赖属性变化时都会重新计算。计算属性可以直接在模板中使用不需要手动调用而监视属性只能通过代码来触发执行。 3.1.4 使用场景
计算属性的使用场景 需要根据多个依赖属性计算得出一个属性值的场景如一个购物车的总价。需要对某个属性进行复杂的逻辑计算如对一个列表进行排序、筛选等操作。需要对模板中的数据进行格式化如将时间戳转化为日期格式。需要对数据进行缓存避免频繁计算如根据条件过滤后的结果。 监视属性的使用场景 当需要在某个属性发生变化时执行一些操作如发送 Ajax 请求、更新本地存储、修改其他数据等。当需要监听一个复杂对象或数组的变化时如监听一个表单对象的变化可以使用深度监视。当需要在组件加载时或销毁时执行一些操作时如在组件加载时获取数据、在组件销毁时清除定时器。 总的来说计算属性适合处理复杂的属性计算和数据格式化等场景而监视属性适合监听数据的变化和执行一些特定的操作等场景需要根据具体的业务需求来选择使用哪个特性。
3.2 v-show和v-if
3.2.1 作用 v-show 和v-if是 Vue.js 框架中的指令都用于控制元素的显示与隐藏。使用 v-show 或v-if指令将其添加到需要控制显示与隐藏的元素上例如 div v-showisVisibleHello, World!/div
div v-ifisVisibleHello, World!/divisVisible是一个布尔类型元素当 isVisible 的值为 true 时元素会显示出来当 isVisible 的值为 false 时元素会隐藏起来。 3.2.2 区别 v-show 通过 CSS 样式的控制来显示或隐藏元素。当 v-show 的值为 true 时元素会被设置为 display: block显示出来当 v-show 的值为 false 时元素会被设置为 display: none隐藏起来。这种方式虽然不需要重新渲染 DOM但是元素依然存在于页面中可能会影响页面布局和性能。v-if 是基于条件判断的动态组件它会根据条件动态地添加或删除元素以实现显示或隐藏的效果。当 v-if 的值为 true 时元素会被添加到 DOM 中显示出来当 v-if 的值为 false 时元素会从 DOM 中移除隐藏起来。这种方式虽然需要重新渲染 DOM但是可以更好地控制页面的布局和性能。 3.2.3 使用场景 v-show 适用于需要频繁切换显示与隐藏的元素因为它的切换速度比 v-if 快不需要重新渲染 DOM。但是如果需要在初始渲染时就确定元素是否需要显示应该优先考虑使用 v-if 指令因为它可以在元素的添加和删除之间切换可以更好地控制 DOM 的渲染和销毁。v-if 适用于需要根据条件动态地添加或删除元素的场景例如当数据满足一定条件时才需要显示某个元素。但是如果需要频繁切换元素的显示与隐藏应该优先考虑使用 v-show 指令因为它的切换速度更快不需要重新渲染 DOM。 3.3 过滤器 Vue.js 中的过滤器filters是一种用于格式化文本输出的工具可以在模板中使用 {{ }} 插值表达式和 v-bind 指令中使用。它可以将原始数据进行处理和转换生成一个新的值然后输出到视图中显示给用户。 Vue.js 中的过滤器可以通过全局过滤器和局部过滤器两种方式来定义。全局过滤器可以在任何 Vue 实例中使用而局部过滤器只能在定义它的组件实例中使用。 下面是使用全局过滤器的例子 !-- 定义全局过滤器 --
script
Vue.filter(uppercase, function(value) {return value.toUpperCase();
});
/script
!-- 在模板中使用过滤器 --
div{{ message | uppercase }}/div上面的例子中我们定义了一个名为 uppercase 的全局过滤器用于将字符串转换为大写格式。在模板中我们使用 | 管道符将需要过滤的数据 message 与过滤器名称 uppercase 进行连接输出的结果将是 message 中的字符串全部大写。 除了字符串转换过滤器还可以进行格式化日期、数字、货币等各种类型的数据。Vue.js 内置了一些常用的过滤器如 capitalize将首字母转换为大写、currency将数字格式化为货币格式等也可以通过自定义过滤器来满足特定的需求。
