v-bind深入理解

v-bind:class="classProperty" 中,v-bind 是指令,: 后面的 class 是参数,而 classProperty 则在官方文档中被称为“预期值”。
举个例子
如下,v-bind是指令,title是参数,doubi是预期值。

<div id="app">
 <p v-bind:title="doubi">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p>
</div>
<script>
var vm = new Vue({
 el: '#app',
 data: {
   doubi: 'title content'
 }
});

</script>

打开浏览器检查,可以发现v-bind后面的内容已经被写入p元素的属性。虽然这里title是生编乱造的一个玩意。

image.png

如果改成这样

<div id="app">
  <p v-bind:class="doubi">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    doubi: 'apple'
  }
});

</script>

结果

image.png

如果再改

<div id="app">
  <p v-bind:class="doubi">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    doubi: true
  }
});

</script>

结果

image.png

再改

<div id="app">
  <p v-bind:class="{doubi:xx}">html属性不能使用双大括号形式绑定,只能使用v-bind指令</p>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    xx: true
  }
});

</script>

结果

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容