class与computed一起应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.activeColor{
color: red;
}
</style>
<body>
<!--mvvm里面的v-->
<div id="app">
<div :class="setClass">
你好
</div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script >
//这是mvvm里面的vm
var vm=new Vue({
el:'#app',
//这是mvvm里面的m
data:{
isActive:true,
error:true
},
computed:{
setClass:function(){
return{
activeColor:this.isActive && this.error
}
} }
})
</script> </body>
</html>
class与computed一起应用的更多相关文章
- mobx @computed的解读
写在前面:我一开始看不懂官网的@computed的作用,因为即使我把@computed去掉,依然能正确的report,然后我百度谷歌都找不到答案,下面都是我自己的理解,如果是有问题的,不对的,请务必留 ...
- vue中,class、内联style绑定、computed属性
1.绑定Class ①对象语法 <li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)" ...
- redmine computed custom field formula tips
项目中要用到Computed custom field插件,公式不知道怎么写,查了些资料,记录在这里. 1.http://apidock.com/ruby/Time/strftime 查看ruby的字 ...
- Computed read-only property vs function in Swift
In the Introduction to Swift WWDC session, a read-only property description is demonstrated: class V ...
- 用computed返回this.$store.state.count,store更改了,但是computed没有调用
今天出现了这个问题,store更新了,你computed为啥不调用呢??? 另一个.vue更新了state,这个的computed就监听不到了么? 是用这种格式更新的this.$store.commi ...
- KnockoutJS 3.X API 第三章 计算监控属性(4)Pure computed observables
Pure computed observables Pure computed observables是KO在3.2.0版本中推出的.她相对于之前的ComputedObservables有很多改进: ...
- knockout源码分析之computed(依赖属性)
一.序列图 二.主要代码文件 1.dependentObservable.js:主要包含ko.computed相关方法的处理2.dependencyDetection.js:主要包含依赖的监控上下文对 ...
- Knockout 新版应用开发教程之Computed Observables
Computed Observables 如果你有监控属性firstName和lastName的话,此时如果你想要显示全名? 这个时候computed(以前叫做依赖)监控属性就出马了,这是一个函数用来 ...
- Knockout 新版应用开发教程之Observable与computed
KO是什么? KO不是万能的,它的出现主要是为了方便的解决下面的问题: UI元素较多,用户交互比较频繁,需要编写大量的手工代码维护UI元素的状态.样式等属性? UI元素之间关系比较紧密,比如操作一个元 ...
- Vue.js学习 Item5 -- 计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...
随机推荐
- VBA分别使用MSXML的DOM属性和XPATH进行网页爬虫
本文要重点介绍的是VBA中的XmlHttp对象(MSXML2.XMLHTTP或MSXML.XMLHTTP),它可以向http服务器发送请求并使用微软XML文档对象模型Microsoft XML Doc ...
- 关于 table 那些事儿
一. table thead/tbody/tfoot 组合写法: table: 表格: thead: 表头: tbody: 标签表格主体(正文): tr:行: th:表头单元格 td:单元格: tb ...
- 本地数据存储解决方案以及cookie的坑
本地数据存储解决方案以及cookie的坑 问题: cookie过长导致页面打开失败 背景: 在公司的项目中有一个需求是打开多个工单即在同一个页面中打开了多个tab(iframe),但是需要在刷新时只刷 ...
- MonkeyRunner——Mac
1. MonkeyRunner介绍: Android的SDK中集成了三个可用来进行自动化测试的工具:Monkey.MonkeyRunner和Robotium.这三个测试工具都是基于黑盒测试. Monk ...
- stm32 触摸屏 XPT2046
引脚功能描述 控制字的控制位命令 控制字节各位描述 单端模式输入配置 差分模式输入配置 时序 前8个时钟用来通过DIN引脚输入控制字节,接着的12个时钟周期将完成真正的模数转换,剩下的3个多时钟周期将 ...
- 微信小程序 之wxml保留小数点后两位数的方法及转化为字符串的方法
原理:wxml中不能直接使用较高级的js语法,如‘.toFixed’,‘toString()’,但可以通过引入wxs模块实现效果 1.新建`filter.wxs` var filters = { ...
- NTFS文件系统概述
NTFS简介 NTFS是Windows NT家族1的限制级专用的文件系统2.Win95.Win98识别不了NTFS,只有支持NT内核的OS才能识别NTFS文件系统.当前,NTFS取代了老式的FAT文件 ...
- zookeeper服务【-】windows安装与liunx安装
windows安装zookeeper-3.4.14 https://www.apache.org/dyn/closer.cgi/zookeeper/ [zookeeper下载地址] 1.开启服务之前需 ...
- jar命令详解
原文链接:https://www.cnblogs.com/anyehome/p/9435371.html JAR包是Java中所特有一种压缩文档,其实大家就可以把它理解为.zip包.当然也是有区别的, ...
- pandas里面过滤列出现ValueError: cannot index with vector containing NA / NaN values错误的解决方法(转)
###df_18的字段fuek是否包含 / df_18[df_18['fuel'].str.contains('/')] 报错: ValueError Traceback (most recent c ...