vue中通过属性绑定为元素设置class属性

先准备的j几个class属性：.red{color:red;} .thin{font-weight:thin} .active{letter-spacing：0.5em}

 

//原来的绑定方法
<h1 class="red thin">这是一个标题</h1>
//第一种方法，直接传递一个数组，class使用v-bind做数据绑定
<h1 v-bind：class="['red','thin']">这是一个标题</h1>
//第二种方法，在数组中使用三元表达式
<h1 v-bind：class="['red','thin',flag?'active':'']">这是一个标题</h1>
//在数组中使用对象来代替三元表达式，提高代码可读性
<h1 v-bind：class="['red','thin',{'active':flag}]">这是一个标题</h1>
//用v-bind绑定对象时，对象的属性是类名，由于对象的属性可以带引号也可以不带引号，所以就没写引号；属性的值是一个标识符{red:true,thin:true,active:false}
<h1 v-bind：class="classobj">这是一个标题</h1>
<script>
    var vm=new Vue({
            el:'#app',
            data:{
                 flag:true,
                 classobj:{red:true,thin:true,active:false}
             },
    }) 
</script>




 


vue中通过属性绑定为元素设置style属性


 




//对象是无序键值对的集合，由于font-weight有‘-’，所以不能省略''
<h1 v-bind：style="{color:'red','font-weight':200}">这是一个标题</h1>

//第二种
<h1 v-bind：style="styleobj1">这是一个标题</h1>

//第三种,同时使用两个style对象，使用数组

<h1 v-bind：style="[styleobj1,styleobj2]">这是一个标题</h1>


<script>
    var vm=new Vue({
            el:'#app',
            data:{
                 flag:true,
                 styleobj1:{color:'red','font-weight':200},
　　              styleobj2:{'letter-spacing:0.5em}
             },
    }) 


</script>


 




 


 


观察者模式




//观察者（observer）模式: 变量值修改，所有关注的人都能自动得到通知，并收到新值
//保存数据的对象
var data={
  n:0, //外人想随时获得的变量，保存着外人关心的一个数据n
  observers:[],//用一个数组保存将来关心这个变量n的所有外人，这些觊觎这个变量n的外人，也称为观察者
  //定义一个函数，专门修改变量n的值
  setN(n) {
    this.n = n
    //任何时候修改了变量n的值，都可以通知所有关注n的外人
    this.notifyAllObservers()
  },
  //定义一个函数，专门将关注变量n的外人(观察者)对象，集中保存在data中的observers数组中，便于集中通知。
  addObs(observer) {
    this.observers.push(observer)
  },
  //定义一个函数，专门用于通知当前data中的observers数组中保存的关心变量n的外人们，n发生改变了
  notifyAllObservers() {
    //遍历observers数组中每个外人对象
    this.observers.forEach(observer => {
      //每遍历一个外人对象，就通知外人，它关心的变量n发生改变了，请及时获取变量n的新值
      observer.getNewN()
    })
  }
}

//向data的observers数组中添加三个关心变量n的外人(观察者)对象
for(var i=0;i<3;i++){
  data.addObs({
    //每个外人对象都包括两个属性和一个函数
    name:`obs${i}`, //外人的名字
    look: data, //每个外人都关心data对象中的变量，都紧紧盯着data对象
    //每个外人都准备一个函数，当data中变量改变时，可用于重新获得data对象中n的新值。
    getNewN:function(){
      console.log(`${this.name} known that n is updated to ${this.look.n}`)
    }
  })
}

// 测试代码
console.log("data将n改为1时:")
data.setN(1)
console.log("data将n改为2时:")
data.setN(2)
console.log("data将n改为3时:")
data.setN(3)