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学习笔记九的列表案例 ...
随机推荐
- 【BZOJ 1004】 [HNOI2008]Cards
[题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1004 [题意] 给你sr+sb+sg张牌,(令n=sr+sb+sg),让你把这n张牌染 ...
- PC端页面如何调用QQ进行在线聊天？
pc端如何实现QQ在线咨询? html代码如下: <a href="tencent://message/?uin=1234567&Site=Sambow&Menu=ye ...
- H3C 链路聚合分类
- 2018-8-10-win10-uwp-win2d-离屏渲染
title author date CreateTime categories win10 uwp win2d 离屏渲染 lindexi 2018-08-10 19:17:19 +0800 2018- ...
- 深度解读 - Windows 7核心图形架构细致分析(来自微软)
编辑:马志文 时间: 2009-12-29 如现在大家所想的那样, Windows7 其实是 Windows Vista 的改进版. Windows 7 在 Windows Vista 的基础上进行了 ...
- 阿里云“网红"运维工程师白金：做一个平凡的圆梦人
他是阿里云的一位 P8 运维专家,却很有野心得给自己取花名“辟拾(P10)”:他没有华丽的履历,仅凭着 26 年的热爱与坚持,一步一个脚印踏出了属于自己的技术逆袭之路:他爱好清奇,练就了能在 20 秒 ...
- The Struts dispatcher cannot be found异常的解决方法
系统错误:HTTP Status 500 异常信息:The Struts dispatcher cannot be found. This is usually caused by using St ...
- CentOS6.5升级NTP
二.安装依赖包 yum -y install gcc libcap libcap-devel glibc-devel 三.升级Ntp 1.tar zxf /tmp/ntp-4.2.8p10.tar.g ...
- python内置模块(python标准库)
1.time模块 掌握下面三种方式的转换 文件名不能跟系统内置模块重名! #三种方式的转化关系 #时间戳(timestamp): 为了计时 为了减法计算 import time print(t ...
- Harbor本地镜像库安装与使用
Harbor安装很简单,不过安装以后要怎么操作,百度了好久都没有找到实操的方法,怎么从官方拉取镜像后更新到私有仓库中?这个弄了好久,一样样测试后才找到方法,对于不熟悉私有仓库的小白来说,有点坑.还好花 ...