5vue 样式绑定
<!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>
.active {
border:1px solid red;
width:100px;
height:100px;
}
.error {
background-color: orange;
}
</style>
</head>
<body>
<div id = "app1">
<div>
<div v-bind:class="{active:isActive,error:isError}">测试样例</div>
<button v-on:click="handle">切换</button>
</div>
</div>
<script src="vue.js"></script>
<script>
var vue1 = new Vue({
el: '#app1',
data:{
isActive:true,
isError:true
},
methods:{
handle:function(){
this.isActive = !this.isActive;
this.isError = !this.isError;
}
}
})
</script>
</body>
</html>
以上是class样式绑定
5vue 样式绑定的更多相关文章
- wpf样式绑定 行为绑定 事件关联 路由事件实例
代码说明:我要实现一个这样的功能 有三个window窗口 每个窗体有一个label标签 当我修改三个label标签中任意一个字体颜色的时候 其他的label标签字体颜色也变化 首先三个窗体不用 ...
- 3-5 Vue中的样式绑定
Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...
- Vue（九）：样式绑定v-bind示例
Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 st ...
- vue的样式绑定
vue在样式绑定,看这官方的文档,怎么试都不行后来看了一篇文章 <div :class="[rankClass]"></div> <script> ...
- angularJS 状态样式绑定
angularJS提供输入框不同状态下的样式绑定 输入框有4种状态 ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error): <!DOCT ...
- Vue.js：样式绑定
ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...
- Vue.js学习笔记 第二篇 样式绑定
Class绑定的对象语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Vue 将样式绑定到一个对象让模板更清晰
Vue 将样式绑定到一个对象让模板更清晰 <div id="app"> <div v-bind:style="styleObject"> ...
- Vue样式绑定和事件处理器
一.样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. v-bind 在处理 class 和 style 时, 专门增强了它 ...
- VueJS样式绑定v-bind:class
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 style 时, 专门增强了它 ...
随机推荐
- 【git】3.1git分支-分支简介
资料来源 (1) https://git-scm.com/book/zh/v2/Git-%E5%88%86%E6%94%AF-%E5%88%86%E6%94%AF%E7%AE%80%E4%BB%8B ...
- [Oracle19C 数据库管理] 用户与权限管理
用户管理 用户具有以下属性: 用户名: 不能超过30位.不能包含特殊字符.必须用字符开头.用户名不区分大小写. 认证方式: 最常见的是密码认证. 默认永久表空间: 控制用户可以在哪个表空间里创建对象. ...
- c#笔记（四）——switch
---恢复内容开始--- using UnityEngine; using System.Collections; public class Script1 : MonoBehaviour { ...
- javascript【应用】debounce和throttle
debounce防抖 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时. <div id=& ...
- 基于SDN控制器(ONOS)实现量子设备配置管理
基础知识 基于SDN控制器(ONOS)实现量子设备配置管理,首先选择合适的南向协议.OpenFlow与NETCONF是两个最适合企业网场景使用的协议.目前各大网络厂商的网络设备都已基本宣称支持NETC ...
- Vue 局部过滤器和全局过滤器
Vue 过滤器总结: 定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理) 语法: 1.注册过滤器: Vue.filter(name,callback) 或 new Vue{filt ...
- KEIL5中C/C++优化等级问题
知乎上有篇详解 https://zhuanlan.zhihu.com/p/24402180 强烈推荐 C/C++的优化等级会对程序产生 不定性的影响,至于选择哪种优化等级必须从 现有的程序分析才行 ...
- FIFO 串口接收处理机制
与安富莱电子的串口处理机制做对比交互 参考链接: https://www.eet-china.com/mp/a161019.html
- linux 系统⽇常管理--运维必备
[监控系统的状态] 1. w 查看当前系统的负载 相信所有的linux管理员最常⽤的命令就是这个'w' 了,该命令显⽰的信息还是蛮丰富 的.第⼀⾏从左⾯开始显⽰的信息依次为:时间,系统运⾏时间,登录⽤ ...
- holiday06-英语语法-语序和五种基本句式
第六天 英语五种基本句式: 基本句式一:S V (主+谓) 基本句式二:S V P (主+系+表) 基本句式三:S V O (主+谓+宾) 基本句式四:S V o O(主+谓+间宾+直宾) 基本句式五 ...