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 时, 专门增强了它 ...
随机推荐
- tvm中使用了xgboost库中的_fmt_metric
_fmt_metric这个xgboost的回调函数已经被遗弃了. 为了能跑起来tvm,可以pip install xgboost==1.5.0
- Visual C++ Redistributable for Visual Studio各版本下载地址
Visual C++ Redistributable for Visual Studio各版本下载地址飞鹰_天涯于 2021-06-24 09:35:21 发布 5978收藏 8版权Microsoft ...
- Anaconda之conda常用命令介绍
anaconda用法: 查看已经安装的包: pip list 或者 conda list 安装和更新: pip install requests pip install requests --upgr ...
- fragment加radio不可滑动
public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener { ...
- k8s master节点高可用 nginx+keepalived配置文件
nginx配置 user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid; i ...
- dp泄露
DP泄露 选了三道与RSA的dp泄露有关的题,dp泄露算是比较有辨识度的题型. 目录 DP泄露 原理 ctfshow funnyrsa3 分析 解答 BUUCTF RSA2 分析 解答 [羊城杯 20 ...
- Solution Set - 杭电多校 2022 Day2 一句话题解
A:看了题就很容易想到虚树吧,建出虚树后考虑整体扫一遍虚树,注意到这是一棵根向树,那么统计其实十分简单,将对 \(C\) 类节点的标记下放,\(A,B\) 类节点同时上传,如果在 DFS 的过程中发现 ...
- 什么是bootstrap?
In computing, the term bootstrap means to boot or to load a program into a computer using a much sma ...
- -bash: ./mlnxofedinstall: /usr/bin/perl: bad interpreter: No such file or directory
-bash: ./mlnxofedinstall: /usr/bin/perl: bad interpreter: No such file or directory 解决办法:安装相关的环境即可 输 ...
- cesium开启关闭日照（含有模型）
准备条件:已经完成3Dtiles的导入 和viewer的创建 <script>//开日照 function Bshadows(){ viewer.scene.globe.enableLig ...