Vue 动态赋值 class

Vue 在操作 DOM 元素的 class 属性时，有以下多种方法

比较通用的是否赋值方式

通过以下 :class="{show: show}" 的方式可以决定该元素是否拥有名称为 show 的 class
- data() 中的 show 属性为 true ，则赋予 show class ，否则不赋予

<template><div class="watch-mooc-panel" :class="{show: show}"></div>
</template><script type="text/ecmascript-6">export default {name: 'mooc',data() {return {show: false}}}
</script><style scoped lang="stylus" rel="stylesheet/stylus">.watch-mooc-panelwidth 100%height 100%position absolutetransition background-color .3s&.showbackground-color #000000
</style>

使用三目运算符的方式

注意使用三木运算符添加的属性语法和上述方式存在明显区别

<template><div class="watch-mooc-panel" :class="show ? 'show' : 'hide'"></div>
</template>

Vue 动态赋值 class相关推荐

Vue动态赋值video视频
<video id="myvideo"ref="video"controlsautoplaywebkit-playsinlineplaysinlinex5 ...
vue项目中img的src动态赋值
没想到这破东西,居然这么折腾人. 时间紧,长话短说.一般这个动态赋值,要用require.而且,这个require里,只能有一个变量,多个变量,有运算,有方法,都不行. 1.不行 <img:sr ...
axios vue 动态date_Web前端Vue系列之-Vue.js 实战
课程简介: 课程目标:通过本课程的学习,让大家掌握Vue.js的进阶知识并在项目中应用. 适用人群:具有一定vue开发基础的开发人员. 课程概述:Vue (读音 /vjuː/,类似于 view) 是一 ...
VUE动态切换Button的icon
vue中的组件属性动态赋值可以通过v-bind:属性值来实现属性值的动态绑定,例如常用的icon上下变动 <el-button v-bind:icon="iconData" ...
vue 动态获取的图片路径不显示_Vue中img的src是动态渲染时不显示的解决
Vue中img的src是动态渲染时不显示的解决今天在项目中遇到一个需求,设计稿如下就是展示用户头像,数据从后端获取,要是没有拿到则显示默认图片. 项目采用vue开发,本人也是第一次在实际项目中使用 ...
使用Vue动态生成form表单的实例代码
具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流: ...
vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
vue动态切换css文件_vue实现样式之间的切换及vue动态样式的实现方法
编程之家收集整理的这篇文章主要介绍了vue实现样式之间的切换及vue动态样式的实现方法,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 前言既然我们选择了vue,那么在做东西时就不要想 ...
vue 动态修改路由参数
转载自 vue 动态修改路由参数 import merge from 'webpack-merge':修改原有参数 this.$router.push({query:merge(this.$rout ...

Vue 动态赋值 class

Vue 动态赋值 class

更多精彩

比较通用的是否赋值方式

使用三目运算符的方式

Vue 动态赋值 class相关推荐

最新文章

热门文章