vuejs之v-bind

发布时间：2020-12-16 23:03:22 所属栏目：百科来源：网络整理

导读：看一个例子： html head script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" / script style .active { border: 1px solid red; } / body div id ="app" h2 v-bind:title ="pTitle" 测试内容 h2 :title ="pTitle + '!!!'" v-bind:class ="isActive

看一个例子：

<html>

head>
  script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scriptstyle>
    .active {
      border: 1px solid red;
    }
  </>
bodydiv id="app">
    h2 v-bind:title="pTitle">测试内容h2:title="pTitle + '!!!'"v-bind:class="isActive?'active':''" @click="toggleActive">这是内容="{active:isActive}"div
    var app = new Vue({
      el: '#app',data: {
        pTitle: '这是标题',isActive: false,},methods: {
        toggleActive: function () {
          this.isActive = !this.isActive;
        }
      },})
  >

结果：

右键检查：

可以看出，v-bind就是给标签绑定属性。我们可以利用这一个特性，实现给标签加上事件之后改变属性。一般语法为：v-bind:属性名=“属性值”，可以简写为:属性名=“属性值”。

比如上面的：

这里有两种方式，一种是利用三元运算符，一种是利用{属性名：对应vue的值}，第二种较为方便。这里就是根据布尔值点击之后给h2标签加上一个class="active"的属性，看下效果：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!