Vue类名、样式、computed计算属性、todolist
Vue类名、样式、computed计算属性
1.类名
<div id="app"> <h3> 类名的绑定 </h3> <div class="size"></div> <div class="size bg"></div> <hr> <h4> 类名-对象的形式 </h4> <div :class = "{'size': classFlag}"></div> <div :class = "{'size': classFlag,'bg': classFlag}"></div> <div :class = "{size: classFlag}"></div> <hr> <h3> 类名-数组的形式 </h3> <div :class = "['size','bg']"> </div> <div :class = "[size,bg]"> </div> <button @click = "classFlag=!classFlag"> change class </button> <button @click = "changeClass"> change class </button> <div :class = "[classFlag?size:bg]"> </div> </div> <script> new Vue({ el: '#app', data: { classFlag: true, size: 'size', bg: 'bg' }, methods: { changeClass(){ this.classFlag = !this.classFlag } } }) </script>
2.样式
- 数据 --控制–样式—》 功能 效果
- 样式 要和 数据 绑定–》 v-bind(首选)
<div id="app"> <h3> 样式 </h3> <div style="width:50px;height:50px;background:red;"></div> <hr> <h3> 样式绑定-对象形式 </h3> <div :style = "{width:'50px',height:'50px',background:'red'}" ></div> <div :style = "style" ></div> <h3> 样式绑定 -- 数组形式 </h3> <div :style = "[{width:'50px',height:'50px',background:'yellow'}]" ></div> <div :style = "[style]" ></div> <div :style = "[styleFlag?style:'']" ></div> </div> <script> new Vue({ el: '#app', data: { styleFlag: true, style: { width:'50px',height:'50px',background:'blue' } } }) </script>
3.computed 计算属性
<div id="app"> <p> {{ msg.split('').reverse().join('') }} </p> <p> {{ reverseHandler() }} </p> <p> {{ msg }} </p> <h3> 计算属性 </h3> <p> {{ reverseMsg }} </p> </div> new Vue({ el: '#app', data: { msg: ' zhangjun xihuan paojiao he huanglvse ' }, methods: { reverseHandler(){ return this.msg.split('').reverse().join('') } }, computed: { /* 多个方法 */ reverseMsg(){ return this.msg.split('').reverse().join('') } } })
- 为什么要有计算属性?
- 直接模板语法中直接写逻辑 // 1.html结构不纯粹 2. 写起来不舒服
- 方法运行 // 但是语义性不高
- 计算属性是什么?
- 计算属性是new Vue(options) options中的一个配置项, 用
computed表示, 它的值是一个对象 - 计算属性的值中存放的是方法
- computed vs methods
- 同: 都是函数, 都可以书写逻辑
- 异: methods中的方法运行依赖于事件或是方法调用 举例 @click = eventFnName {{ eventFnName() }}
但是computed的方法名可以直接当做变量一样用, 类似于直接在data中定义的数据
- 项目中如果发现以下两个特点, 就是用计算属性
- 有逻辑
- 使用类似变量
ToDoList
1.引入cdn文件Sui
2.v-for循环列表 todos
3.通过todos里面的flag判断true、false来切换button-fill是否存在
4.edit按钮,操作input标签的v-show的inputFlag
5.input的@keyup.enter=”addTodos“加入todos,todos.push()
输入的值与数据的值双向绑定:v-model="task"
6.底部A(全部代办事项) F(已完成的事项) U (未完成的事项)
底部单独给数据渲染btnlist:[{ id,className(用于填充),text}]
7.给data一个type:"A"
computed计算属性(操作类似变量)添加一个方法
newTodos(){}
完成 :return this.todos.filter((item,index)=>{
if(type==“A”){ return this.todos }else if(type==“F”){ return item.flag?item:null }
}) filter查找flag的值 true/false
或者把函数单独拿出来 finished() unfinished()在newTodos里做switch判断
列表的循环使用新的计算属性创造的新的newTodos(v-for=“ item in newTodos ”)
判断type的值是否与当前的状态相同;
8.写删除
methods写一个方法,remove(){}点击时删除当前index的数据,数组的操作方法
this.todos.splice(index,1)删除当前index的一个
判断一下是否勾选,若未勾选提示客户(操作maskbox的v-show=“maskFlag显示)是否要删除此条数据;通过flag判断时是否勾选
写一个activeIndex保存当前数据的index
- 详解Vue的computed(计算属性)使用实例之TodoList
- vue的computed计算属性
- Vue计算属性computed
- Vue 中计算属性computed和method
- vue计算属性computed和methods的区别
- vue计算属性computed
- 在vue的计算属性computed中实现传参
- vue计算属性computed的使用方法示例
- Vue中计算属性computed的运用及理解
- Vue之computed(计算属性)详解get()、set()
- Vue计算属性computed简介及简单用法(表格筛选)
- vue的计算属性(computed)、methods、watched三者区别
- vue-computed计算属性
- Vue计算属性computed
- Vuejs——(3)计算属性,样式和类绑定
- vue:计算属性(computed)
- vue计算属性computed、事件、监听器watch的使用讲解
- VUE -- Vue.js每天必学之计算属性computed与$watch
- 谈一谈对Vue计算属性computed的初步认识,及用法心得。
- vue 计算属性computed