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: false } <div :class="[classA, { classB: isB, classC: isC }]">
渲染为:
<div class="class-a classB">
如果是短横符这样的 class-b 是不成功的,所以这里还是要用标准的对象语法加上引号
<div :class="[classA, { 'class-b': isB, 'class-c': isC }]">
渲染为:
<div class="class-a class-b">
以上所述是小编给大家介绍的Vue.js绑定HTML class数组语法错误,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
vue.js入门教程之基础语法小结
前言 Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb. 以下代码是Vue.js最简单的例子, 当 input 中的内容变化时,p 节点的内容会跟着变化. <!-- html --> <div id="demo"> <p>{{message}}</p> <input v-model="message"> </div> new
-
Vue.js学习笔记之常用模板语法详解
本文介绍了Vue.js 常用模板语法,分享给大家,具体如下: 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只渲染一次,即第一次渲染出文本后,文本内容不再跟随属性值的变化而变化. 实时渲染 <div class="row"> <h2>文本 - 实时渲染</h2> <input type="text" v-model="msg" class=&quo
-
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
本文介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持,分享给大家,具体如下: 一个小遗憾 能来看这篇文章的想必不用我来介绍vue是什么了.先让我们膜拜大神!vue项目的创建者尤大写了个sublime下语法高亮的插件,有人问他how about webstorm support?他是这么回答的.默哀一分钟. 添加高亮和语法支持 这个我是通过插件来实现的.网上目前有两个插件: 插件1:https://github.com/henjue/vue-for-idea 插件2:htt
-
vue.js语法及常用指令
Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同
-
Vue.js中数据绑定的语法教程
数据绑定语法 Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值 文本 数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新.
-
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍. Vue读音/vju:/,和view类似.是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb. 可以去 这里下载 .自己整理了一个Vue.js的demo, https://github.com/chenhao-ch/demo-vue 快速入门 以下代码是Vue.js最简单的例子, 当input中的内容变化时,p节点的内容会跟着变化. <!-- html
-
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.js中$set与数组更新方法
由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当利用索引直接设置数组的某一项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength,不会更新数组. 当然vue中给了解决方法,就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice,caoncat等修改数组,同时也将触发状态更新: ex: 所以如果在实例创建后添加新的属性到实例上,则不会触
-
Vue.js 中 axios 跨域访问错误问题及解决方法
1.假如访问的接口地址为 http://www.test.com/apis/index.php (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起请求时,出现如下错误: Failed to load http://www.test.com/apis/index.php?&act=login: The value of the 'Access-Control-Allow-Origin' headerin the response must no
-
vue .js绑定checkbox并获取、改变选中状态的实例
如下所示: 1.html <div class="weui-cells weui-cells_checkbox font14" v-for="item in items"> <label class="weui-cell weui-check__label"> <div class="weui-cell__ft width-inherit"> <input type="che
-
vue.js绑定事件监听器示例【基于v-on事件绑定】
本文实例讲述了vue.js绑定事件监听器.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi
-
Ajax向后台传json格式的数据出现415错误的原因分析及解决方法
问题描述: ajax往后台传json格式数据报415错误,如下图所示 页面代码 function saveUser(){ var uuId = document.getElementById("uuid").value; var idCard = document.getElementById("idCard").value; alert(uuId+idCard); // var result = new Object(); // result.uuId = uuI
-
vue.js绑定class和style样式(6)
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 通过 v-bind:class 或者 :class 来为style或者class来绑定 绑定class <div class="test">
-
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 最近在使用jquery.form.js提交包含文件的表单时,碰到了一个问题:当碰上网速较慢时,而我们又设置了timeout时,例如: var options = { timeout: 3000 //限制请求的时间,当请求大于3秒后,跳出请求 } 我们的页面会死在这里,贴上F12开发者工具返回的结果: 此时,我们并没有处理错误的回调函数,而百度出来的例子中也只有这两个回调函数: beforeSubmit: s
-
MySQL删除表时I/O错误的原因分析与解决
问题现象 最近使用sysbench测试MySQL,由于测试时间较长,写了一个脚本按prepare->run->cleanup的顺序在后台跑着.跑完后察看日志发现一个问题,MySQL服务的错误日志中出现多条类似以下信息的报错: [ERROR] InnoDB: Trying to do I/O to a tablespace which does not exist. I/O type: read, page: [page id: space=32, page number=57890], I/O
随机推荐
- SQL Server 2008 安装和配置图解教程(附官方下载地址)
- SQL Server 2005“备份集中的数据库备份与现有的数据库不同”解决方法
- AngularJS 霸道的过滤器小结
- Python常用的爬虫技巧总结
- JS获取年月日时分秒的方法分析
- JavaScript实现找出数组中最长的连续数字序列
- "PageMethods未定义"或"对象不支持此属性或方法"解决方法分享
- asp.net 在处理向该请求提供服务所需的配置文件时出错
- php使用sql server验证连接数据库的方法
- 利用递归把多维数组转为一维数组的函数
- Android实现自动文本框提示功能
- js实现Select下拉框具有输入功能的方法
- CSS教程之CSS的应用
- jquery图片轮播特效代码分享
- vbs 百度小助手
- jquery实现图片上传之前预览的方法
- jquery配合.NET实现点击指定绑定数据并且能够一键下载
- 没有form表单情况下敲回车键提交表单的js代码
- 杰奇1.5官方升级后发现$i不能解析的解决方法
- Android带进度条的下载图片示例(AsyncTask异步任务)