vue初学核心基础02

8.v-bind补充

8.1v-bind绑定类名

v-bind指令给"任意标签"的"任意属性"绑定数据

对于大部分的属性而言我们只需要直接赋值即可, 例如:value="name"

但是对于class和style属性而言, 它的格式比较特殊

• 通过v-bind绑定类名格式
  
  :class="['需要绑定类名', ...]"

注意点:

• 直接赋值一个类名(没有放到数组中)默认回去Model中查找
  
  :class="需要绑定类名"
• 数组中的类名没有用引号括起来也会去Model中查找
  
  :class="[需要绑定类名]"
• 数组的每一个元素都可以是一个三目运算符按需导入
  
  :class="[flag?'active':'']"
• 可以使用对象来替代数组中的三目运算符按需导入
  
  :class="[{'active': true}]"
• 绑定的类名太多可以将类名封装到Model中

obj: {
    'color': true,
    'size': true,
    'active': false,
  }

8.2绑定样式

obj: {
    color: 'red',
    'font-size': '80px',
}

<p :style="obj">

<!--
    注意点:
    如果Model中保存了多个样式的对象 ,想将多个对象都绑定给style, 那么可以将多个对象放到数组中赋值给style即可
    -->
    <p :style="[obj1, obj2]">我是段落</p>

9.v-on

<div id="app">
    <button @click="myFun">按钮</button>
</div>

<script>
    let vue = new Vue({
        el: "#app",
        data: {},
        methods: {
            myFun(){
                alert('234');
            }
        }
    })
</script>