使用 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 相关文章推荐
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
jquery的键盘事件修改代码
Feb 24 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
vue中用H5实现文件上传的方法实例代码
May 27 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 Javascript
vue3获取当前路由地址
Feb 18 Vue.js
(模仿京东用户注册)用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原理之异常机制深入分析
2010/08/08 PHP
ThinkPHP安装和设置
2015/07/27 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
node.js中的require使用详解
2014/12/15 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
JavaScript中transform实现数字翻页效果
2017/03/08 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
JsChart组件使用详解
2018/03/04 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
Python可变参数用法实例分析
2017/04/02 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Python正则表达式和元字符详解
2018/11/29 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
flask项目集成swagger的方法
2020/12/09 Python
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
2014年圣诞节促销方案
2014/03/14 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis