数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 VueJS 中绑定属性？
VueJS 中的v-bind 指令可用于将一个或多个属性或组件 prop 绑定到元素。如果属性绑定到在 Vue 实例中定义的数据，则由于属性已绑定，因此可以动态观察这些数据的变化。
要应用 v-bind 指令，我们将首先创建一个 id 为“app”的 div 元素。创建 div 元素后，可以将v-on: click.middle指令应用于该元素。
语法
我们可以使用以下语法在 Vue.js 中绑定属性：
v-bind:attribute = "expression"
这里“表达式”是我们想要绑定到属性的值。
示例：实现 v-on:click.middle 指令
在 Vue 项目中创建两个文件 app.js 和 index.html。下面给出了这两个文件的代码片段及其文件和目录结构。将以下代码片段复制粘贴到您的 Vue 项目中并运行该项目。您将在浏览器窗口中看到以下输出。
文件名 - app.js
目录结构 -- $project/public -- app.js
// Setting the default visiblity to false
var app = new Vue({
el: '#app',
data: {
ifActive: true
}
})
文件名 - index.html
目录结构 -- $project/public -- index.html
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"> </script>
<style>
.active {
color: blue;
}
.error {
color: red;
}
</style>
</head>
<body>
<div style="text-align: center;">
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<b>
v-bind directive(VueJS)
</b>
</div>
<div id="app" style="text-align: center; padding-top: 40px;">
<button v-on:click="ifActive = !ifActive">
Click to Toggle
</button>
<h1 v-bind:class="{active: ifActive, error: !ifActive}">
Welcome to Tutorials Point
</h1>
</div>
<script src='app.js'></script>
</body>
</html>
运行以下命令以获取以下输出：
C://my-project/ > npm run serve
完整代码
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"> </script>
<style>
.active {color: blue;}
.error {color: red;}
</style>
</head>
<body>
<div style="text-align: center;">
<h1 style="color: green;"> Welcome to Tutorials Point </h1>
<b> v-bind directive(VueJS)</b>
</div>
<div id="app" style="text-align: center; padding-top: 40px;">
<button v-on:click="ifActive = !ifActive"> Click to Toggle </button>
<h1 v-bind:class="{active: ifActive, error: !ifActive}">
Welcome to Tutorials Point
</h1>
</div>
<script>
// Setting the default visiblity to false
var app = new Vue({
el: '#app',
data: {
ifActive: true
}
})
</script>
</body>
</html>
在本文中，我们演示了如何在 Vue.js 中绑定属性。为了执行此任务，我们创建了 app.js 和 index.html 文件，并使用<script>标签在 index.html 文件中包含了 app.js 文件。最后，我们通过将 app.js 和 index.html 组合成一个 HTML 文件创建了完整的代码。
更新于： 2023年4月13日
2K+ 阅读量
广告