使用 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 17 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
jquery实现保存已选用户
Jul 21 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
js命名空间写法示例
Dec 18 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
解决await在forEach中不起作用的问题
Feb 25 Javascript
(模仿京东用户注册)用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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
使用PHP模拟HTTP认证
2006/10/09 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
PHP闭包函数详解
2016/02/13 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
requireJS使用指南
2016/04/27 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
大学生职业生涯规划范文
2013/12/31 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
公司捐款倡议书
2014/05/14 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
秦兵马俑导游词
2015/02/02 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
感恩老师主题班会
2015/08/12 职场文书
怎样写好工作计划
2019/04/10 职场文书
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript