vuejs之v-bind
看一个例子：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.active {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app">
<h2 v-bind:title="pTitle">测试内容</h2>
<h2 :title="pTitle + '!!!'">测试内容</h2>
<h2 v-bind:class="isActive?'active':''" @click="toggleActive">这是内容</h2>
<h2 v-bind:class="{active:isActive}">这是内容</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
pTitle: '这是标题',
isActive: false,
},
methods: {
toggleActive: function () {
this.isActive = !this.isActive;
}
},
})
</script>
</body>
</html>结果：
右键检查：
可以看出，v-bind就是给标签绑定属性。我们可以利用这一个特性，实现给标签加上事件之后改变属性。一般语法为：v-bind:属性名=“属性值”，可以简写为:属性名=“属性值”。
比如上面的：
<h2 v-bind:class="isActive?'active':''" @click="toggleActive">这是内容</h2>
<h2 v-bind:class="{active:isActive}">这是内容</h2>
这里有两种方式，一种是利用三元运算符，一种是利用{属性名：对应vue的值}，第二种较为方便。这里就是根据布尔值点击之后给h2标签加上一个class="active"的属性，看下效果：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-02-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读