使用 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 相关文章推荐
将函数的实际参数转换成数组的方法
Jan 25 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
javascript初学者常用技巧
Sep 02 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
Vue三层嵌套路由的示例代码
May 05 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 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扩展函数
2006/10/09 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
PDO::_construct讲解
2019/01/27 PHP
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
node.js中npm包管理工具用法分析
2020/02/14 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
python实现一个简单的ping工具方法
2019/01/31 Python
YUV转为jpg图像的实现
2019/12/09 Python
Python通过文本和图片生成词云图
2020/05/21 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
经理职责范文
2013/11/08 职场文书
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js