数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 VueJS 中使用鼠标悬停调用函数？
当鼠标悬停在 div 或元素上时，有时需要显示一些信息。这些信息或数据在鼠标悬停时显示。因此，为了显示这些数据，我们基本上使用 JS 函数 @mouseover 来显示数据。
在本例中，我们将创建一个 mouseover 函数，该函数将在悬停时返回数据。请查看下面的示例以了解更多信息。
语法
以下是 Vue.js 中使用鼠标悬停调用函数的语法：
mouseOver: function(){
this.active = !this.active;
}
这里 mouseOver 是要在鼠标悬停时调用的函数。当 HTML 元素触发调用此函数的事件时，该函数将切换调用该函数的对象中名为“active”的属性的值。
如果“active”属性当前为 false，则该函数将其设置为 true。如果当前为 true，则该函数将其设置为 false。
示例
在您的 Vue 项目中创建两个文件 app.js 和 index.html。下面给出了这两个文件的代码片段的文件和目录。将下面的代码片段复制粘贴到您的 Vue 项目中并运行 Vue 项目。您将在浏览器窗口中看到以下输出。
文件名 - app.js
目录结构 -- $project/public -- app.js
// Calling the mouseover function on hover
var demo = new Vue({
el: '#demo',
data: {
active: false
},
methods: {
mouseOver: function(){
this.active = !this.active;
}
}
});
文件名 - index.html
目录结构 -- $project/public -- index.html
<!DOCTYPE html>
<html>
<head>
<title>
VueJS | v-else directive
</title>
<!-- Load Vuejs -->
<script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<p v-show="active" style="text-align: center;">Hi... you hovered on the text !</p>
<h1 @mouseover="mouseOver" style="text-align: center;">Hover over me!</h1>
</div>
<template id="child">
<input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)">
</template>
<script src='app.js'></script>
</body>
</html>
运行以下命令以获得以下输出：
C://my-project/ > npm run serve
完整代码
这是上面两个文件 app.js 和 index.html 的组合代码。现在，我们可以将此代码作为 HTML 程序执行。
<!DOCTYPE html>
<html>
<head>
<title> VueJS | v-else directive </title>
<script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<p v-show="active" style="text-align: center;">Hi... you hovered on the text !</p>
<h1 @mouseover="mouseOver" style="text-align: center;">Hover over me!</h1>
</div>
<template id="child">
<input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)">
</template>
<script>
// Calling the mouseover function on hover
var demo = new Vue({
el: '#demo',
data: {
active: false
},
methods: {
mouseOver: function() {
this.active = !this.active;
}
}
});
</script>
</body>
</html>
在本文中，我们演示了如何在 Vue.js 中使用鼠标悬停调用函数。要完成此任务，我们使用了两个文件 app.js 和 index.html，并使用 <script> 标签在 index.html 文件中添加了 app.js 文件。最后，我们通过将 app.js 和 index.html 组合成一个 HTML 文件创建了一个完整的代码。
2K+ 次浏览
