分享下我遇到的错误,也是记录下,我遇到的问题;

vue 绑定 class 与style 遇到的问题

我的代码时这样的, 把vue实例中sty 注释掉了, 这里就发生了这样的报错,

我的原意是想测试下.在style标签写的是否生效:

---

所以有两种思路,
一是 把 class 其前面的 : 给删了,自然不会报错,
二 是 把 绑定的class 在进行补全; :class="{sty:true/false}"

这样均可以实现 , 在style中定义的样式的生效

三元表达式的使用:
(在三元运算符中 使用的 [ ...] 来进行表达式的使用 )

这里使用 :style来进行三元表达式的时候,需要使用的是 [ ..]

基本形式 :

style="[true ?  sty : font]"

使用 { } ,会报编译错误

注意：数组中的classify如果不加引号的话，代表的是data中的一项，并不是类名，将classify加上双引号，变成字符串就可以变成类名

---

使用class 来进行绑定的时:

 :class="[true ?  'sty' : 'font']"

此时,必须加上引号,不然相当于直接变量进行赋值,而data中没有这个数据,就会报错

:class='[[条件1 ？'class1' : 'class2'],{'class3' : 条件2},'class4',...]'

---

总结
class属性绑定：
1.绑定变量

<div :class="{classA:a , classB: b,......}"/></div>
 new Vue({
        el:'#app',
        data:{
            a:true,//根据true/false判断是否执行class
            b:true
        }
    })

2.绑定对象

<div :class="test"></div>
 new Vue({
        el:'#app',
        data:{
            test:{
                color:red;
                background:yellow;
            }
        }
    })

3.绑定一个数组

<div :class="[test1,test2]"></div>
  new Vue({
        el:'#app',
        data:{
            test1:'test1Class',
            test2:'test2Class',
           
        }
    })

4.绑定三元表达式

:class="[A>B?'signSpanChange':'signSpan']" 
new Vue({
        el:'#app',
        data:{
            A:"",
            B:""
        }
    })

style样式绑定:

1.绑定变量

:style="{color:cl,background:bk}"
new Vue({
        el:'#app',
        data:{
            cl:'red',
            bk:'yellow'
        }
    })

2.绑定一个对象

:style="testObj"
new Vue({
        el:'#app',
        data:{
            testObj:{
                color:red;
                background:yellow;
            }
        }
    })

3.绑定函数返回值

:style="{background:!flag?deep:BackType(sign.status)}"
methods: {
       BackType: function(status) {
      if (status == "已完成") return "#d7f2e6";
      if (status == "工作中") return "#23b7e5";
      if (status == "缺料" || status == "等待" || status == "配料完成")
        return "#ced0d1";
      if (status == "下班" || status == "转产") return "#f8ac59";
      if (status == "质检") return "#ed5565";
    }
  }