使用 Vue 绑定单个或多个 Class 名的实例代码


Posted in Javascript onJanuary 08, 2018

一、用 变量形式 绑定单个 Class 名

在 vue 中绑定单个 class 名还好说,直接写就可以了

<template>
 <div id="app">
 <!-- 因为是自定义属性,所以要用到 v-bind ,简写为 : -->
 <!-- 3.将 box 绑定给 div -->
 <div :class="box"></div>
 </div>
</template>

<script>
export default {
 name: 'app',
 data () {
 return {
 // 2.在 data 中把 yellow 赋给 box
 box: 'yellow'
 }
 }
}
</script>

<style>
/* 1.在样式表中写好样式 */
.yellow{
 width: 200px;
 height: 200px;
 background: #ff0;
}
</style>

使用 Vue 绑定单个或多个 Class 名的实例代码

用 Vue 绑定单个Class 名

二、用 数组形式 绑定多个 Class 名

比如我们想再给这个 div 加个阴影

在 style 中写好样式

.shadow{
 box-shadow: 10px 10px 5px 0 #999;
}

在 data 中继续添加数据对象

<script>
export default {
 name: 'app',
 data () {
 return {
 box: 'yellow',
 shadow:'shadow'
 }
 }
}
</script>

在标签中以数组的形式绑定 Class 名

<template>
 <div id="app">
 <div :class="[box,shadow]"></div>
 </div>
</template>

就 OK 了。

使用 Vue 绑定单个或多个 Class 名的实例代码

用 数组形式 绑定多个 Class 名

三、用 json 形式 绑定多个 Class 名

该方法方便用于当同时添加多个 Class 名时,在某种情况下判断显示哪种样式

先写好样式

<style>
.yellow{
 width: 200px;
 height: 200px;
 background: #ff0;
}
.shadow{
 box-shadow: 10px 10px 5px 0 #999;
}
</style>

在 data 中添加数字对象,用来做判断

<script>
export default {
 name: 'app',
 data () {
 return {
 show1:true,
 show2:false
 }
 }
}
</script>

以 json 的形式绑定到 class 中,通过布尔值改变 show1 与 show2 的值,来控制 div 的状态

<template>
 <div id="app">
 <div :class="{yellow:show1,shadow:show2}"></div>
 </div>
</template>

使用 Vue 绑定单个或多个 Class 名的实例代码

用 json 形式 绑定多个 Class

ps:vue解决跨域问题

改config/index.js文件

proxyTable: {
// 请求到 '/device' 下 的请求都会被代理到 target: http://debug.xxx.com 中
'/v1/*': {
target: 'https://api.tiaotiao5.com',
secure: true, // 接受 运行在 https 上的服务
changeOrigin: true
}
}

总结

以上所述是小编给大家介绍的使用 Vue 绑定单个或多个 Class 名的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个js写的日历(代码部分网摘)
Sep 20 Javascript
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
在Windows上安装Node.js模块的方法
Sep 25 Javascript
json数据的列循环示例
Sep 06 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
Dec 31 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 #jQuery
Angular 项目实现国际化的方法
Jan 08 #Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 #jQuery
简易Vue评论框架的实现(父组件的实现)
Jan 08 #Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 #Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 #Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 #Javascript
You might like
php遍历目录viewDir函数
2009/12/15 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
php获取apk包信息的方法
2014/08/15 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
Redis构建分布式锁
2017/03/28 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
javascript json2 使用方法
2010/03/16 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
python中的列表推导浅析
2014/04/26 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
keras slice layer 层实现方式
2020/06/11 Python
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
某公司.Net方向面试题
2014/04/24 面试题
高中自我鉴定范文
2013/11/03 职场文书
动员大会主持词
2014/03/20 职场文书
学习心理学的体会
2014/11/07 职场文书
2014年销售工作总结
2014/12/01 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
Redis集群的关闭与重启操作
2021/07/07 Redis