Tsunami黄嵩粟 - 博客园

2021年1月5日

摘要：在数据被渲染之前，可以对其进行进一步处理，比如将字符截取或者将小写统一转换为大写等等，过滤器本身就是一个方法。过滤器可以定义全局或局部 # 全局 // 回调函数中的参数1永久是绑定的数据 Vue.filter(过滤器名称,(value,[…args])=>{}) # 局部过滤器定义此过滤器定义在阅读全文

posted @ 2021-01-05 17:13 Tsunami黄嵩粟阅读(104) 评论(0) 推荐(0)

vue侦听器 - watch

摘要：使用watch来侦听data中数据的变化,watch中的属性一定是data 中已经存在的数据。当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。 <div id="app"> <input 阅读全文

posted @ 2021-01-05 17:05 Tsunami黄嵩粟阅读(87) 评论(0) 推荐(0)

vue计算属性computed

摘要：模板中放入太多的逻辑会让模板过重且难以维护，使用计算属性可以让模板变得简洁易于维护。计算属性是基于它们的响应式依赖进行缓存的，计算属性比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。计算属性定义在Vue对象中，通过关键词c 阅读全文

posted @ 2021-01-05 16:59 Tsunami黄嵩粟阅读(155) 评论(0) 推荐(0)

vue自定义指令 - directive

摘要： https://cn.vuejs.org/v2/guide/custom-directive.html 除了核心功能默认内置的指令，Vue也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令绑定到元素上执行相关操作。自定义指令分为：全局指令和局部指令，当全局阅读全文

posted @ 2021-01-05 16:07 Tsunami黄嵩粟阅读(102) 评论(0) 推荐(0)

vue绑定下拉框 vue修饰符

摘要： <select v-model="selected"> <option>请选择</option> <option>HTML</option> <option>CSS</option> <option>JS</option> </select> data: { selected: '' } .lazy 阅读全文

posted @ 2021-01-05 15:01 Tsunami黄嵩粟阅读(91) 评论(0) 推荐(0)

绑定多个复选框绑定单选框

摘要：此种方式需要input标签提供value属性 <input type="checkbox" value="html" v-model="checkedNames"> <input type="checkbox" value="css" v-model="checkedNames"> <input t 阅读全文

posted @ 2021-01-05 14:56 Tsunami黄嵩粟阅读(123) 评论(0) 推荐(0)

2020年12月28日

绑定单个复选框

摘要： ² 绑定单个复选框绑定一个复选框 <input type="checkbox" v-model="checked"> data:{ checked:true } ² 绑定多个复选框此种方式需要input标签提供value属性 <input type="checkbox" value="html" 阅读全文

posted @ 2020-12-28 19:44 Tsunami黄嵩粟阅读(82) 评论(0) 推荐(0)

v-model

摘要： v-model 作用: 表单元素的绑定，实现了双向数据绑定，通过表单项可以更改数据。 v-model会忽略所有表单元素的value、checked、selected特性的初始值,而总是将Vue实例的数据作为数据来源，应该在data选项中声明初始值。 ² 绑定文本框 <p>{{message}}</p 阅读全文

posted @ 2020-12-28 15:18 Tsunami黄嵩粟阅读(132) 评论(0) 推荐(0)

绑定style

摘要： ² 对象语法 <div:style="{color: redColor, fontSize: '20px'}">对象写法</div> data: { redColor: 'red' } ² 数组语法 <div v-bind:style="[color, fontSize]">数组写法</div> d 阅读全文

posted @ 2020-12-28 15:03 Tsunami黄嵩粟阅读(47) 评论(0) 推荐(0)

样式绑定

摘要：样式绑定 class样式处理 ² 对象语法 # css定义 .active { color: red; } # html <div v-bind:class="{active: isActive}">class样式</div> # js vue data: { isActive: true } cl 阅读全文

posted @ 2020-12-28 14:58 Tsunami黄嵩粟阅读(90) 评论(0) 推荐(0)