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. 为什么要有计算属性？
2. 直接模板语法中直接写逻辑 // 1.html结构不纯粹 2. 写起来不舒服
3. 方法运行 // 但是语义性不高
4. 计算属性是什么？

• 计算属性是new Vue(options) options中的一个配置项， 用
  computed表示， 它的值是一个对象
• 计算属性的值中存放的是方法

3. computed vs methods

• 同： 都是函数， 都可以书写逻辑
• 异： methods中的方法运行依赖于事件或是方法调用 举例 @click = eventFnName {{ eventFnName() }}
  但是computed的方法名可以直接当做变量一样用， 类似于直接在data中定义的数据

4. 项目中如果发现以下两个特点， 就是用计算属性

• 有逻辑
• 使用类似变量

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