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学习笔记九的列表案例 ...
随机推荐
- python类中的双下划线方法
__getitem__,__setitem__和__delitem__ 实现了对象属性的字典化操作. class Person: def __init__(self, name, age, hobby ...
- java 使用反射调用可变参数方法
使用反射操作对象-调用可变参数方法 要把可变参数都当做是其对应的数组类型参数; 如 show(XX... is)作为show(XX[] is)调用; 若可变参数元素类型是引用类型: JDK内部接收到参 ...
- UVa 1152 -4 Values whose Sum is 0—[哈希表实现]
The SUM problem can be formulated as follows: given four lists A, B, C, D of integer values, compute ...
- There is no PasswordEncoder mapped for the id "null"的解决办法
今日在SpringBoot项目中使用 Spring Security ,登录时发现报500错,报错信息如下: There is no PasswordEncoder mapped for the id ...
- Eclipse修改控制台字体
步骤:Window-->Preference-->General-->Appearance-->Colors and Fonts-->Basic-->Text Fo ...
- 两种方法，轻松上手ConfigMap！
属性配置文件在任何应用程序中都非常重要.它们不仅可以让应用程序具备灵活性,还能够根据文件中配置的值产生不同的功能.实际上,在staging.开发.测试.UAT或生产环境中,我们都使用属性配置文件来驱动 ...
- LuoguP3066 逃跑的BarnRunning Away From…
LuoguP3066 先吐槽一下,这道题名字好长啊 一个非常明显的思路,利用倍增数组不断向上跳.直到数值大于\(L\),然后直接差分统计答案就好了. 这种ZROI也考过,不多赘述了. 我们来考虑主席树 ...
- HDU - 3530 Subsequence (单调队列）
Subsequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- P4556 [Vani有约会]雨天的尾巴 （线段树合并）
P4556 [Vani有约会]雨天的尾巴 题意: 首先村落里的一共有n座房屋,并形成一个树状结构.然后救济粮分m次发放,每次选择两个房屋(x,y),然后对于x到y的路径上(含x和y)每座房子里发放一袋 ...
- Android利用Fiddler进行网络数据抓包,手机抓包工具汇总,使用mono运行filddler
Fiddler抓包工具 Fiddler抓包工具很好用的,它可以干嘛用呢,举个简单例子,当你浏览网页时,网页中有段视频非常好,但网站又不提供下载,用迅雷下载你又找不到下载地址,这个时候,Fiddler抓 ...