要给视频加边框,可以使用Vue的样式绑定功能来实现。
首先,在Vue组件的模板中,可以使用`<video>`标签来嵌入视频,然后通过设置样式来给视频加边框。例如:
```html
<template>
<div class="video-container">
<video class="video" src="your-video-url"></video>
</div>
</template>
<style>
.video-container {
width: 400px; /* 设置视频容器的宽度 */
height: 300px; /* 设置视频容器的高度 */
border: 1px solid #ccc; /* 设置边框样式 */
}
.video {
width: 100%; /* 设置视频的宽度为容器的宽度 */
height: 100%; /* 设置视频的高度为容器的高度 */
}
</style>
```
上述代码中,`video-container`类定义了视频容器的样式,包括宽度、高度和边框样式。`video`类定义了视频的样式,包括宽度和高度,设置为100%表示与容器的宽度和高度一致。
然后,在Vue组件的JavaScript代码中,可以将视频的URL绑定到`src`属性上,例如:
```javascript
data() {
return {
videoUrl: 'your-video-url'
}
}
```
然后,在模板中使用`v-bind`指令将`videoUrl`绑定到`src`属性上,例如:
```html
<video class="video" v-bind:src="videoUrl"></video>
```
这样,当`videoUrl`的值发生变化时,视频的URL也会跟着变化,从而播放不同的视频。
完整的示例代码如下:
```html
<template>
<div class="video-container">
<video class="video" v-bind:src="videoUrl"></video>
</div>
</template>
<script>
export default {
data() {
return {
videoUrl: 'your-video-url'
}
}
}
</script>
<style>
.video-container {
width: 400px;
height: 300px;
border: 1px solid #ccc;
}
.video {
width: 100%;
height: 100%;
}
</style>
```
注意,上述代码中的`your-video-url`需要替换为实际的视频URL。