<div class="input-search"  :class="{input-search-focus : iscur == 1}">

在原本有class属性的时候，使用v-bind动态添加class如果没有添加引号就会导致页面不显示（报错），

正确写法
<div class="input-search"  :class="{'input-search-focus' : iscur == 1}">

vue的class和style的绑定的更多相关文章

  1. VUE：class与style强制绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Vue.js的类Class 与属性 Style如何绑定

    Vue.js的类Class 与属性 Style如何绑定 一.总结 一句话总结:数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我 ...

  3. vue基础---Class 与 Style 绑定

    [一]绑定HTML Class (1)对象语法 ①普通绑定class <div id="area" v-bind:class="className"> ...

  4. VUE JS 使用组件实现双向绑定

    1.VUE 前端简单介绍  VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据se ...

  5. 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换

    [源码下载] 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数 ...

  6. Vue.js学习 Item4 -- 数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. ...

  7. vue 内联样式style中的background

    在我们使用vue开发的时候   有很多时候我们需要用到背景图 这个时候会直接使用 内联样式 直接把你拿到的数据拼接上去 注意  在vue中直接使用style时 花括号一定别忘记 还有就是你的url一定 ...

  8. vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下

    vue iview render里面 没有双向绑定 renderHeader 要序列化 反序列 一下 renderHeader: (h, params) => { return [ h('Rad ...

  9. vue 数组和对象的双向绑定不响应问题

    对象和数组的数据类型是对象,对象是对象这个是毫无疑问的.数组可以把索引当成键名,把索引对应的元素当成该键名的键值. vue对象有些操作不能双向绑定的原因是vue未改变原对象,以及未给新增属性增加set ...

随机推荐

  1. Spring Cloud Commons教程（三）忽略网络接口

    有时,忽略某些命名网络接口是有用的,因此可以将其从服务发现注册中排除(例如,在Docker容器中运行).可以设置正则表达式的列表,这将导致所需的网络接口被忽略.以下配置将忽略“docker0”接口和以 ...

  2. nginx修改默认运行80端口的方法

    修改方法 很简单,修改nginx的配置文件, 对应的值,如图: 将其改为别的端口号,就可以了.

  3. 关于Idea热部署，修改代码不需要重启tomcat

  4. wap开发tips

    1.overflow-x 这真的是一个大坑,一旦你在body或者html上用了这个属性,对不起,如果你的页面出现滚动条的话,那就会出现莫名其妙的bug,滑动页面的时候fix在顶部或者底部的会挡住. 解 ...

  5. 【初识TypeScript】 配置环境后运行Hello World编译报错.

    第一次接触TypeScript,配置好环境后, 发现连编写个最基本的Hello World都报错,代码如下: const hello:string = "Hello World!" ...

  6. MySQL-default设置

    Both statements insert a value into the phone column, but the first inserts a NULL value and the sec ...

  7. mac, ios 模拟器

    genymotion  最好的android 硬件模拟器. 可多开,可gps定位,可模拟重力系统,可模拟磁场系统,模拟器海拔高度. 甚至可以模拟sd卡. 直接就等于真机. virtualbox 最好的 ...

  8. 5分钟连续出现某现象+微信模板消息提醒 PHP

    需求场景:用电插座电流连续出现5次电流过高(大于 3A)后停止用电服务,前四次发送电流过高提醒,最后一次发送结束用电服务提醒 思路: Redis  key 设为:插座编号+user户编号  value ...

  9. 【ABAP系列】SAP MB5B中FI凭证摘要是激活的/结果可能不正确 的错误

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP MB5B中FI凭证摘要是 ...

  10. Win10.更新

    1.资料: win10怎么关闭自动更新?win10关闭自动更新步骤-太平洋IT百科.html(https://product.pconline.com.cn/itbk/software/win10/1 ...