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>