vue 02-上
时间:2019-06-18
本文章向大家介绍vue 02-上,主要包括vue 02-上使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
计算属性: 是一个函数,所依赖的元数据变化时,就会再次执行
典型案例todolist
computed:{
计算属性: function(){return 返回值} 使用: {{计算属性}}
}
与method的区别: 方法会每次调用,计算属性不会
计算属性的性能高: 适合做筛选,基于它们的响应式依赖进行缓存的
方法:适合在列表渲染使用,强制渲染执行
计算属性:计算属性也可以是个对象
读取了属性 -> get:fn
修改了属性 -> set:fn
<body>
<div id="example-5">
{{ cptStr }}
</div>
<script>
let vm = new Vue({
el: '#example-5',
data: {
str: 'i love you',
},
computed:{
/* cptStr(){
return this.str.split(' ').reverse().join(' ')
} */
cptStr:{
get: function(){
console.log('get')
return this.str.split(' ').reverse().join(' ')
},
set: function(val){
this.str = val;
console.log('set')
}
}
}
})
</script>
</body>
在控制台输入vm.str='123'页面会立刻改123.即set发生改变
2、样式的操作
class操作/style操作:
v-bind:class="数据|属性|变量|表达式"
:class/style = " 数据 " 数据类型:字符/对象 / 数组
:class="{类名:true,类名2:false}" 布尔值决定样式是否使用
:style="[{css属性名:值},{css属性名小驼峰:值}]"
<body>
<div id="app">
<!-- <a class="btn btn-primary" style="background:red" href="#">按钮</a> -->
<!-- class动态绑定 -->
<h4>class动态绑定</h4>
<a class="btn btn-primary" href="#">按钮1</a>
<a href="#" :class="cl1">按钮2</a>
<!-- <a :class=" cl1 " href="#">按钮2</a> -->
<a :class=" 'btn btn-primary' " href="#">按钮3</a>
<a :class=" {btn:false,'btn-primary':true} " href="#">按钮4</a>
<a :class=" [{btn:false},{'btn-primary':true}] " href="#">按钮5</a>
<!-- style动态绑定 -->
<h4>style动态绑定</h4>
<!-- <a class="btn btn-primary" style="background:red" href="#">按钮</a> -->
<a class="btn btn-primary" :style=" 'background:red' " href="#">按钮1</a>
<!-- <a class="btn btn-primary" :style=" {background:'red',height:'50px'} " href="#">按钮2</a> -->
<!-- <a class="btn btn-primary" :style=" [{background:'red'},{height:'50px',width:'120px'}] " href="#">按钮3</a> -->
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
cl1:'btn btn-primary'
}
})
</script>
</body>
原文地址:https://www.cnblogs.com/sansancn/p/11047451.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 自定义组件使用v-model
- 金蝶K3 WISE版本过服务期后打补丁方法-完善版本
- 图像处理笔记(6)---- OpenCV waitKey函数
- SpringBoot整合Quartz作为调度中心完整实用例子
- SpringBoot整合SpringSecurity简单实现登入登出从零搭建
- SpringBoot整合SpringBatch实用简例
- 解决JPA懒加载典型的N+1问题-注解@NamedEntityGraph
- 基于Shiro,JWT实现微信小程序登录完整例子
- Spring Cloud Eureka 总结
- Spring Cloud Feign 总结
- 掘金15W沸点简单分析(一)
- SpringBoot整合Shiro实现基于角色的权限访问控制(RBAC)系统简单设计从零搭建
- 基于AOP和ThreadLocal实现日志记录
- 搭建prometheus+grafana监控SpringBoot应用入门
- 掘金15W沸点简单分析(二)