使用 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 相关文章推荐
菜单效果
Oct 14 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
跟我学习javascript的undefined与null
Nov 17 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
提高网站信任度的技巧
2008/10/17 Javascript
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
JS+CSS实现闪烁字体效果代码
2016/04/05 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
javascript回调函数详解
2018/02/06 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
神经网络python源码分享
2017/12/15 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
电大学习个人自我评价范文
2013/10/04 职场文书
接待员岗位责任制
2014/02/10 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
村安全生产责任书
2014/08/25 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
文明单位申报材料
2014/12/23 职场文书
先进党支部申报材料
2014/12/24 职场文书
销售合作意向书范本
2015/05/08 职场文书
修改并编译golang源码的操作步骤
2021/07/25 Golang