vue学习笔记3： 动态绑定
一、知识点
动态绑定：
vue-class：
- 三目写法
- 对象写法
- 数组写法
vue-style:
- 三目写法
- 对象写法
- 数组写法
二、代码示例
1. vue-class
vue-class三目写法
<head>
<meta charset="utf-8">
<script src="./js/vue.js"></script><!-- 引入vue.js -->
<style>
.red {
background: red; /* isActive为true时的样式 */
} .yellow {
background: yellow; /* isActive为false时的样式 */
}
</style>
<body>
<div id="div1">
<!-- 视图层新建一个div -->
<div :class="isActive?'red':'yellow'">动态绑定class-三目写法</div> <!-- 当isActive为true时，背景为red，否则为yellow -->
<button @click="handleclick()">切换</button> <!-- 通过点击按钮改变isActive的值 -->
</div> <script>
var vm = new Vue({
el: '#div1', //绑定视图层的id
data: {
isActive: true //isActive初始值为true
},
methods: {
handleclick() {
this.isActive = !this.isActive //改变isActive的值，true变false，false变true
}
}
})
</script>
</body>
运行结果：
点击切换按钮效果：
vue-class对象写法
管理多个class时，只需要通过class的属性值为true或false即可
<body>
<div id="div1">
<!-- 视图层新建一个div -->
<div :class="classobj">动态绑定class-对象写法</div>
</div> <script>
var vm = new Vue({
el: '#div1', //绑定视图层的id
data: {
classobj: {
a: true,
b: true,
},
}
})
</script
</body>
运行结果：
我们可以看出a和b为true时，a，b类都用上了
当我们在浏览器控制台把a改为false
运行结果如下：
class中只有b了，所以可以通过对想法快速管理我们的类
vue-class数组写法
<body>
<div id="div1">
<!-- 视图层新建一个div -->
<div :class="classarr">动态绑定class-数组写法</div>
</div> <script>
var vm = new Vue({
el: '#div1', //绑定视图层的id
data: {
classarr:["a","b"],
}
})
</script
</body>
运行结果：
如果想管理类直接对数组进行操作就行
对数组执行删除操作（删掉b）
操作后结果：
对数组执行新增操作（新增c）
操作后结果：
刚才通过vue-class对三目写法，对象写法，数组写法进行了一个详细的讲解，相信大家对他们也有了一定的了解，由于原理相同，vue-style我们直接上代码
2. vue-style
vue-style三目写法
<body>
<div id="div1">
<!-- 视图层新建一个div -->
<div :style="'background:'+(isActive?'red':'yellow')">动态绑定style-三目写法</div> <!-- isActive为true时，背景色为red，否则为yellow -->
<button @click="handleclick()">切换</button>
</div> <script>
var vm = new Vue({
el: '#div1', //绑定视图层的id
data: {
isActive: true, //isActive初值值为true
},
methods: {
handleclick() {
this.isActive = !this.isActive //通过点击改变isActive的值
}
}
})
</script>
</body>
vue-style对象写法
<body>
<div id="div1">
<!-- 视图层新建一个div -->
<div :style="styleobj">动态绑定style-对象写法</div>
</div> <script>
var vm = new Vue({
el: '#div1', //绑定视图层的id
data: {
styleobj: {
background: 'red' //把背景色设为红色
},
}
})
</script>
</body>
vue-style数组写法
<body>
<div id="div1">
<!-- 视图层新建一个div -->
<div :style="stylearr">动态绑定style-数组写法</div>
</div> <script>
var vm = new Vue({
el: '#div1', //绑定视图层的id
data: {
stylearr:[
{background:"yellow"} //背景色为黄色
]
}
})
</script>
</body>
vue学习笔记3： 动态绑定的更多相关文章
- vue学习笔记(四)事件处理器
前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- vue 学习笔记（二）
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- vue学习笔记之：为何data是一个方法
vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- AntDesign vue学习笔记（七）Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
- Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
随机推荐
- Java日志框架——JCL
JCL,全称为"Jakarta Commons Logging",也可称为"Apache Commons Logging". 一.JCL原理 1.基本原理 JC ...
- H3C 不适当的VLAN间路由方式
- P1088 上台阶
题目描述 楼梯有 \(n(1 \le n \le 50)\) 阶台阶,上楼时可以一步上 \(1\) 阶,也可以一步上 \(2\) 阶,也可以一步上 \(3\) 阶,编程计算共有多少种不同的走法. 输入 ...
- 常见DOS操作
D: 去往D盘 cd.. 返回上一级目录 cd 文件名 目录切换到该文件名(子目录)下 cd \ 直接回根目录 dir 当前根目录下的文件目录 dir /s 所有目录
- Java内存溢出java.lang.OutOfMemoryError: PermGen space
今天把以前的一个项目部署在tomcat,启动没问题.因为用到了webservice,当调用webservice中的方法时一直报内存溢出异常 Exception in thread "http ...
- vue-learning：34 - component - 内置组件 - 动态组件component 和 is属性
component动态组件 / is属性 让多个组件使用同一个挂载点,并动态切换,这就是动态组件. 必要条件: 组件标签使用<component></component> 动态 ...
- 随机生成验证码（JS）
效果展示 实现原理 1. html:一般就是一个div: <div id="code"></div> ,样式根据需求设计. 2. JS:1)将所有的验证码所 ...
- LuoguP3045牛券Cow Coupons
LuoguP3045 [USACO12FEB]牛券Cow Coupons 果然我贪心能力还是太差了 ZR讲过的原题我回来对做法没有一丁点印象 有时候有这样一种题目 每个数有两种不同的价值 你可以选择价 ...
- 2019-6-23-win10-uwp-应用放到桌面
title author date CreateTime categories win10 uwp 应用放到桌面 lindexi 2019-06-23 11:11:30 +0800 2019-06-2 ...
- hdu 2454 Degree Sequence of Graph G（可简单图化判定）
传送门 •Havel-Hakimi定理: 给定一个非负整数序列{d1,d2,...dn},若存在一个无向图使得图中各点的度与此序列一一对应,则称此序列可图化. 进一步,若图为简单图,则称此序列可简单图 ...