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>
posted @ 2021-05-26 14:57  紫槐  阅读(42)  评论(0)    收藏  举报