Vue3基础笔记（3）高级绑定

一.Class绑定

        数据绑定的一个常见需求场景师操纵元素的CSS class列表，因为class是attribute，我们可以和其他attribute一样使用v-bind将他们和动态的字符串绑定，但是在处理较为复杂的绑定时，拼接字符串容易出现错误。因此Vue专门为class的v-bind用法进行了增强：可以绑定对象或者数组~

 

<p :class="{ziti:zitiTest,yanse:yanseTest}">属性绑定</p>

 zitiTest:false,
 yanseTest:true

.ziti{
  font-size: 36px;

.yanse{
  color: blue;
}}

如下图，由于zitiTest的值为false而yanseTest的值为true，所以仅显示颜色的样式~

还有一种数组的写法:

<p :class="['yanse','ziti']">另一个属性绑定</p>

二.Style绑定

同理，没什么难度：

<p :style="{color:'red',fontSize:'30px'}">又来一个</p>

三.侦听器

即watch，每次响应式属性发生变化时触发一个函数~

所谓响应式属性，即return中的元素：

export default{
      data(){
        return{
          count:0,
          club:['拜仁慕尼黑','多特蒙德','莱比锡红牛'],
          zitiTest:false,
          yanseTest:true
        }}}

 <p @click="changeT">{{ textY }}</p>

        return{
          count:0,
          club:['拜仁慕尼黑','多特蒙德','莱比锡红牛'],
          zitiTest:false,
          yanseTest:true,
          textY:'原来的值~'
        }

      watch:{
        textY(newValue,oldValue){
          console.log(newValue+" "+oldValue);
          //可以轻松拿到变化前后的值
        }
      }

需要注意的是，watch和method、data同级~

四.表单输入绑定

 v-model的存在大大减少了绑定数据的工作量~

  <form>
    <input type="text" v-model="myname">
    <p>{{ myname }}</p>
  </form>

        return{
          maname:'',
          count:0,
          club:['拜仁慕尼黑','多特蒙德','莱比锡红牛'],
          zitiTest:false,
          yanseTest:true,
          textY:'原来的值~'
        }