快速解决vue动态绑定多个class的官方实例语法无效的问题
首先,直接进入正题,我想要给一个dom绑定多个class,而且是动态绑定,这个时候可以用v-bind简写可以写为“ :”冒号,我查了官方的语法,
具体如下:
<!-- class 绑定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]">
其中第2行和第3行都是采用了数组语法,所以放到了我本人的代码中就是这样写
<a :class="[{ active : hash==='all' }, nav-link]" href="#/all" rel="external nofollow" >全部任务</a>
不幸的是并没有任何卵用,这里的nav-link这个class是固定的不会变的,active这个class需要根据条件来判断是否要加入。
后来查了很多资料也没有解决,最后自己对象写法就成功了,目前看到网上没有解决的案列,所以分享出来。
具体如下:
<a :class="{ 'active': hash==='finish','nav-link':true}" href="#/finish" rel="external nofollow" >已完成</a>
有疑问的可以在评论中提出或者我有错误的也可以说一下。
以上这篇快速解决vue动态绑定多个class的官方实例语法无效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
使用 Vue 绑定单个或多个 Class 名的实例代码
一.用 变量形式 绑定单个 Class 名 在 vue 中绑定单个 class 名还好说,直接写就可以了 <template> <div id="app"> <!-- 因为是自定义属性,所以要用到 v-bind ,简写为 : --> <!-- 3.将 box 绑定给 div --> <div :class="box"></div> </div> </template> &
-
vue 中动态绑定class 和 style的方法代码详解
先列举一些例子 class="['content',{'radioModel':checkType}]" class="['siteAppListDirNode',{open:appitem.open==true}]" class="['portalCenterMenu',{showNav:!showHideNav,hideNav:showHideNav}]" class="{shortcutMenuShow:!showHideNav,
-
详解Vue.js动态绑定class
Vue.js 的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM "绑定"到底层数据.被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新.基于这种特性,通过vue.js动态绑定class就变得非常简单. 1. 数据绑定 vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下: <a v-bind:href="http://www.cnblogs.c
-
vue.js实现点击后动态添加class及删除同级class的实现代码
最近使用vue需要实现一个点餐选择商品规格的页面,需要通过vue动态的给被点击的元素添加class名字,使其变色,其他的删除class.如图: 开始在网上找了许多办法发现不是太好用,最后找到一个发现还是不错的,记录一下 html: <div class="weui-mask" id="guige"> <div class="guigeBox"> <p class="guigeTitle">{
-
Vue.2.0.5实现Class 与 Style 绑定的实例
Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时, Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 绑定 HTML Class 对象语法 我们可以传给 v-bind:class 一个对象,以动态地切换 class . <div v-bind
-
Vue.js每天必学之Class与样式绑定
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 绑定 HTML Class 尽管可以用 Mustache 标签绑定 class,比如 `{% raw %}class="{{ className }}"
-
Vue.js绑定HTML class数组语法错误的原因分析
Vue.js绑定HTML class数组语法错误,详情如下所示: 昨天在官网教程上发现一个错误是这样的,下面看图 http://cn.vuejs.org/guide/class-and-style.html 当有多个条件class时这样写有些繁琐.在1.0.19+中,可以在数组语法中使用对象语法: 如果这样写是可以执行成功的,但有错误 data: { classA: 'class-a', classB: 'class-b', classC: 'class-c', isB: true, isC:
-
快速解决vue动态绑定多个class的官方实例语法无效的问题
首先,直接进入正题,我想要给一个dom绑定多个class,而且是动态绑定,这个时候可以用v-bind简写可以写为" :"冒号,我查了官方的语法, 具体如下: <!-- class 绑定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[cl
-
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
问题: 使用this.$ref['form'] .resetFields()无法重置表单项 原因: 1.没有给表单添加ref属性 <el-form ref="form"></el-form> 2.表单项el-form-item没有添加prop属性,prop属性需要与input框绑定的属性一致 <el-form ref="form" :model="sizeForm" label-width="80px&qu
-
快速解决vue在ios端下点击响应延时的问题
在apicloud开发中遇到的问题:用vue.js的点击事件,安卓点击响应迅速而ios点击响应有延时(大约300ms). 解决方案如下: 引入<script type="text/javascript" src="/js/mobile/fastclick.js"></script> 然后在页面加载时,使用 $(function() { FastClick.attach(document.body); }); 以上这篇快速解决vue在ios端下
-
快速解决vue.js 模板和jinja 模板冲突的问题
jinjia和vue.js默认的模板转义符都是{{}} 目前的解决办法是修改vue.js的转义符,将原来的{{}}替换为其他标签,我改为{[]} 版本1.x和2.x方法如下 // 1.x Vue.config.delimiters = ['{[', ']}'] // 2.x new Vue({ delimiters: ['{[', ']}'] }) 以上这篇快速解决vue.js 模板和jinja 模板冲突的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
快速解决Vue项目在IE浏览器中显示空白的问题
vue项目在IE浏览器中显示空白,是因为js文件没有加载,需要引入babel-polyfill这个东西,而用vue脚手架搭建的项目是没有引入此工具的 引入方法: 打开packge.json,在dependencies中加入:"babel-polyfill" : "^6.23.0" 然后重新npm install 在App.vue文件中import:import "babel-polyfill" 这样IE浏览器就显示正常了. 以上这篇快速解决Vu
-
快速解决element的autofocus失效问题
原因: autofocus是vue中input的原生属性,element也支持这种方法, 但是element中的el-input组件外面还有其他组件, 导致autofocus失效, 只能手动调用focus方法来聚集. 方法: 绑定ref <el-input ref="myNameId" v-model="form.name" /> this.$refs.myNameId.focus(); 动态绑定ref <el-input :ref="
-
快速处理vue渲染前的显示问题
添加css [v-cloak] { display: none; } 给vue对象加上v-cloak <div v-cloak> {{ message }} </div> 以上这篇快速处理vue渲染前的显示问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 详解vue数据渲染出现闪烁问题 解决使用Vue.js显示数据的时,页面闪现原始代码的问题 基于Vue渲染与插件的加载顺序的问题详解
-
快速解决vue-cli不能初始化webpack模板的问题
vue init webpack pro [Failed to download repo] [connect ETIMEDOUT 192.30.255.112] 报这个错误 有人说是代理问题.我也不懂,但这个方法有用 1.去github上下载要初始化的模板 https://github.com/vuejs-templates/webpack 或者直接用git去clone你要的模板. 2.将下载好的模板解压.git clone的不用解压. 3.将文件夹放到c:administrator/.vue
-
解决Vue动态加载本地图片问题
最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来.控制台显示src是有获取到图片地址的,可是就是加载不出来. 最后才发现原因原来是浏览器中直接显示'./img/img1.png',也就是没有经过编译的步骤,直接将获取到的数据当作字符串显示. 解决方法: 1.在当前界面全局import图片地址 //使用import引入 import img1 from './img/img1.png' import img2 from './img/img2.png' export defa
-
解决vue的 v-for 循环中图片加载路径问题
先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要存放到前台.当时我想,vue 中的img 的src 可以动态绑定到一个变量上, 很简单吗,就没有考虑太多,直接开始做了. 首先和后台商量一下数据结构,因为图片要和名称一一对应,所以后台要返回中英文的名称的映射,我把前台的图片名称直接设置给后台给的英文名称,从而读取图片,图片和中文名称就一一对应了.数
随机推荐
- python僵尸进程产生的原因
- IOS 多线程GCD详解
- kNN算法python实现和简单数字识别的方法
- KVM虚拟化(一)——KVM虚拟机的介绍与简单使用
- JavaScript高级程序设计 读书笔记之九 本地对象Array
- php防止sql注入代码实例
- Python基于Socket实现的简单聊天程序示例
- python 网络编程常用代码段
- SWFObject Flash js调用类
- C# 邮箱mail 发送类
- ubuntu下迅雷极速版的安装与使用
- java多线程编程之使用Synchronized块同步变量
- IOS xib布局小技巧-边框设置
- Dedecms模板常用调用标签代码整理
- 如何判断一个整数的二进制中有多少个1
- Java基础教程之类数据与类方法
- php简单实现发送带附件的邮件
- PHP 操作文件的一些FAQ总结
- 杏林同学录(九)
- Java 9中如何对IntegerCache进行修改详解