video

猪与朱

已于 2024-04-02 14:04:57 修改

阅读量416

点赞数 4

文章标签： javascript css 前端 vue.js

于 2024-03-18 09:58:50 首次发布

本文链接：https://blog.csdn.net/weixin_74460913/article/details/136800741

版权

本文介绍了HTML5`<video>`标签的关键属性如autoplay、controls、loop和muted，以及如何在Vue.js中使用它们。同时讲解了v-if和v-show的区别，以及如何在Vue组件中绑定数据和DOM元素。

摘要由CSDN通过智能技术生成

< video >标签

1. autoplay

< video >加上 autoplay = " autoplay " 视频在准备就绪之后立马开始播放

<video width="300" height="" autoplay="autoplay" >
	<source src="./egggawag.mp4" type="video/mp4"></source>
<ideo>

2. controls

< video >加上 controls = " controls " 视频出现播放控制按件

<video width="300" height="" controls=" controls" >
	<source src="./egggawag.mp4" type="video/mp4"></source>
<ideo>

在这里插入图片描述

3. loop

< video >加上 loop = " loop " 之后视频开始循环播放

<video width="300" height="" loop=" loop" >
	<source src="./egggawag.mp4" type="video/mp4"></source>
<ideo>

4. muted

< video >加上 muted = " muted " 之后视频静音

<video width="300" height="" muted="muted" >
	<source src="./egggawag.mp4" type="video/mp4"></source>
<ideo>

插值语法

功能：用于解析标签内容。
写法：

<div id="app"> {{aaa}} </div>

阻止VUE在启动时产生的提示：

Vue.config.productionTip = false;

绑定容器

绑定容器的2种方式

1.el绑定 : " 容器 id 或 class 等 "
2.Vue实例.$mount( " 容器 id 或 class 等 " )，注：一定写在最后

el:'#app', //第一种绑定方法
app.$mount("#app") //第二种绑定方法

data用于给容器添加值

data: {
    app: 'Hello Vue!',
}

整体写法

//第一种
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
    }
})
//第二种
var app = new Vue({
    data: {
        message: 'Hello Vue!',
    }
})
app.$mount("#app");

v-i f和 v-show 区别

1.相同的：都可以进行显示隐藏
2.不同点：v-if存在或不存在，v-show展示或不展示
3.优缺点：少次的显示隐藏推荐使用v-if，减少内存的消耗多次的显示隐藏推荐使用v-show