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

一.Class绑定

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

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

还有一种数组的写法:

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

 

二.Style绑定

同理，没什么难度：

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

三.侦听器

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

四.表单输入绑定

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

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

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