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