<button v-bind:disabled="isButtonDisabled">Button</button> 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-bind.html</title>
        <script type="text/javascript" src="vue-dev/dist/vue.js"></script>
    </head>

    <body>
        <!--这是我们的View-->
        <div id="example">

<br>Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：<br>
<div v-bind:id="dynamicId"></div>

<br>在布尔特性的情况下，它们的存在即暗示为 true，v-bind 工作起来略有不同，在这个例子中：<br>
<button v-bind:disabled="isButtonDisabled">Button</button>
<br>如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 button 元素中。<br>
<br><br>
        </div>


     <script>
var vm = new Vue({
    el:'#example',
  data: {
    dynamicId: 1,
    isButtonDisabled:true
  }
})
    </script>

    </body>
</html>

 

posted @ 2017-12-11 16:51  sky20080101  阅读(551)  评论(0)    收藏  举报