Vue中的v-bind -- 转载

    科技2022-08-07  106

    Vue中的v-bind -- 转载

    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时,则按钮变灰,不可点击。

    Processed: 0.009, SQL: 8