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 时, 专门增强了它 ...
随机推荐
- Android移动端性能测试工具mobileperf
简介:mobileperf是阿里开源的一个python PC 工具,可以收集Android性能数据: cpu.内存.流畅度.fps.logcat日志.流量.进程线程数.进程启动日志,mobileper ...
- ES深分页
一.背景 1.ES默认分页from+size 2.在大数据量和深度分页的时候,效率非常低 二.效率低原因 1.例如要查第501页的10条数据,from为5000,size为10 2.ES会查询并排序5 ...
- CAD中如何将图形对象快速转换成三维曲面？
天小编将接着上节内容给大家分享浩辰CAD软件中将图形对象快速转换成三维曲面的相关操作技巧,感兴趣的小伙伴可以和一起来了解一下哦! CAD中将图形转换为曲面的操作步骤: 1.用浩辰CAD软件中打开图纸后 ...
- python基础 补漏
输出 -----------定义变量类型 类型 集合 mongodb的用法和redis差不多一样的 NoSQL 数据库之一 https://www.runoob.com/python3/python- ...
- 从create-react-app 学点东西1：web-vitals
导言 市场中流行的框架有很多地方是值得我们深入的去探究或学习的,<从create-react-app学点东西>这系列文章从create-react-app创建的项目中找出一些重要或者容易忽 ...
- mybatis bind 标签 覆盖 复杂对象的某个属性值 问题。
需求: 有四个sql 都需要用一个 相同的where 条件,于是定义了一个sql 标签. 然后在每个sql中使用 <include refid="myWhereSql"> ...
- Jmeter(三十九) - 从入门到精通进阶篇 - Jmeter配置文件的刨根问底 - 上篇（详解教程）
------------------------------------------------------------------- 转载自:北京-宏哥 https://www.cnblogs.co ...
- view 相关代码片段笔记
代码中动态创建view,并把AttributeSet加入到当前自定义的view中,动态创建属性相关 //https://blog.csdn.net/chenhuakang/article/detail ...
- Ngrinder 制作脚本-（二）
接上一篇文章:了解了Ngrinder的介绍和工作原理之后,相信大家都想着怎么使用这款工具进行性能测试 一.Ngrinder-Controller 的安装 环境要求: (1)jdk1.8以上 (2)Ja ...
- Vue3+vite+Echarts案例大屏可视化--千峰（推荐）
https://www.bilibili.com/video/BV14u411D7qK?p=33&spm_id_from=pageDriver&vd_source=e2cfe74d93 ...