Vue绑定类样式和内联样式

菜虚虚

于 2024-01-22 09:29:29 发布

阅读量905

点赞数 20

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_72075031/article/details/135716823

版权

Vue基本指令

Vue绑定类样式

使用v-bind指令绑定类属性有两种语法：对象语法和数组语法。
对象语法
v-bind:class接受参数是一个对象，而且可以与普通的class属性共存。具体语法如下所示：

<div v-bind:class=”{ 类样式名:绑定数据,…}”></div>

类样式名可以有多个，通过绑定数据为true或false来控制样式是否应用到元素中。

数组语法
- 绑定class不仅可以使用对象方式，还可以是数组方式，语法如下所示：
```
<div v-bind:class="[绑定数据1, 绑定数据2…"></div>
```
在Vue中不仅可以绑定类样式，还可以绑定HTML标签的内联样式。绑定HTML标签的内联样式也可以使用对象或数组方式。

对象语法

v-bind:style的对象语法十分直观——看着非常像CSS，但其实是一个JavaScript对象。 CSS属性名可以用驼峰式（camelCase）或短横线分隔（kebab-case），需要用引号括起来命名，语法如下所示：
```
<div v-bind:style="{ 样式属性:绑定数据 }"/>
<div v-bind:style=“JavaScript样式对象" />
```
使用Vue绑定HTML标签的内联样式实现向油画上添加边框圆角和阴影效果

HTML代码:
<div id="app">
<h3>绑定Style 对象语法</h3>
<img src="images/painting.jpg" alt="风景画"v-bind:style="styleObject" />
</div>
JavaScript代码:
var vm = new Vue({
el: "#app", data: 
{ styleObject: { width: "450px", 
"box-shadow": "0 5px 15px 5px #888888",
borderRadius: "50px"
}
}}）;

短横线分隔（kebab-case）驼峰式（camelCase

当v-bind:style使用需要添加浏览器引擎前缀的CSS属性时，如transform，Vue会自动侦测并添加相应的前缀。

条件渲染指令

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，基本语法如下：
```
<div v-if="expression"></div>
```
- expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回 bool的运算式。
- 可以用v-else指令为v-if添加一个“else块”。v-else元素必须立即跟在v-if元素的后面，否则它不能被识别。
除了上面的v-if以外，也可以使用v-show实现条件渲染。
与v-if不同的是带有v-show的元素始终会被渲染并保留在DOM中。v-show只是简单地切换元素的CSS属性display。
```
v-show不支持<template>元素，也不支持v-else。
```
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。如果在初始渲染时条件为假，则什么也不做。—直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show就简单得多了，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

事件绑定

v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。通过v-on可以绑定Vue实例选项参数methods中的方法作为事件的处理代码，“v-on:”后参数接受所有的原生事件名称。v-on指令的语法如下所示：
```
<button v-on:click=‘事件处理方法’>按钮</div>
```
- Vue也提供了v-on的缩写形式，可以将上面语法中的内容改写为<button @:click=‘事件处理方法’>按钮，这两句语句是等价的。
- 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
- 在JavaScript的事件处理程序中一般调用event.preventDefault()方法取消事件的默认动作，以及调用event.stopPropagation()方法阻止事件冒泡。
在软件开发原则中，一般建议方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。
为了解决这个问题，Vue为v-on提供了多个事件修饰符，而事件修饰符都是由点开头的指令后缀来表示的，并且事件修饰符可以串联使用。主要修饰符如下所示：
.stop：等同于调用event.stopPropagation()。
.prevent：等同于调用event.preventDefault()。
.capture：使用capture模式添加事件监听器。
.self：只当事件是从监听元素本身触发时才触发回调。
.once：点击事件将只会触发一次。
事件修饰符使用方式如下代码所示：
- 阻止单击事件继续传播
```
<a v-on:click.stop="doThis"></a>	
```
- 阻止表单默认提交事件
```
<form v-on:submit.prevent="onSubmit"></form>
```
- 阻止默认提交事件且阻止冒泡
```
<form v-on:submit.stop.prevent="onSubmit"></form>
```
- 阻止默认提交事件且阻止冒泡，并不绑定事件
```
<form v-on:submit.prevent></form>
```
- 只当在event.target是当前元素自身时触发处理函数，即事件不是从内部元素触发的
```
<div v-on:click.self="doThat">...</div>
```
- 点击事件将只会触发一次
```
<a v-on:click.once="doThis"></a>
```

使用事件修饰符来阻止事件冒泡

HTML代码:
<div id="app">
<div class="box" v-on:click="saySelf('div的click触发')" v- on:click.self="saySelf('div自己click触发')">
<button v-on:click="saySelf('button的click触发')">按钮事件并事件冒泡</button>
<button v-on:click.stop="saySelf('button的click触发,不事件冒泡')">按钮事件并事件不冒泡</button>
</div>
</div>
JavaScript代码:
var vm = new Vue({
el: "#app", methods: { saySelf(msg) {
console.log(msg);
}
}
});