使用 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实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
轻松实现JavaScript图片切换
Jan 12 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
Vue微信公众号网页分享的示例代码
May 28 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
有关 PHP 和 MySQL 时区的一点总结
2008/03/26 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
2017/06/02 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
python海龟绘图实例教程
2014/07/24 Python
Python中replace方法实例分析
2014/08/20 Python
python构建深度神经网络(续)
2018/03/10 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
pytorch masked_fill报错的解决
2020/02/18 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
什么是抽象
2015/12/13 面试题
商场开业庆典策划方案
2014/06/02 职场文书
给医院的感谢信
2015/01/21 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
学历证明范文
2015/06/16 职场文书
环保建议书作文400字
2015/09/14 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis