Mastache语法(即{{msg}}这样的格式)不能作用于HTML特性上,遇到这种情况应该去使用v-bind指令
v-bind:属性 = “(在vue中要用的变量名字)”
例子:
<div v-bind:id="dynamicId"> 本div的id是vue决定的哈哈<div>对于布尔特性,它比较特殊,他们只要存在就意味着值为true,v-bind:disabled使用要特别注意下
<button v-bind:disabled = "isButtonDisabled">我是被vue控制的按钮</button>上面的代码中,如果isButtonDisabled的值是null、undefined或者false,disabled特性甚至不会被包含在渲染出来的元素中。
补充:disabled属性设置为true生效。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>插值之原始HTML</title> <script src="vue.js"></script> </head> <body> <div id="app"> <div v-bind:class ="color">我是被vue控制的颜色属性</div> <button v-bind:disabled = "isButtonDisabled">我是被vue控制的按钮</button> </div> <script> var vm = new Vue({ el: "#app", data: { color: 'skyblue', isButtonDisabled: false, } }); </script> </body> <style> .red{color:red;} .skyblue{color:skyblue;} </style> </html>这段代码的运行结果是 button仍可点击,当将isButtonDisabled的值改为 true时,则按钮变灰,不可点击。