v-bind屬性,v-model屬性

一、v-bind

v-bind動態綁定指令

默認情況下標簽自帶屬性的值是固定的，可以使用v-bind:'需要綁定的值'='表達式'

所謂動態綁定動態的含義是我們不必修改頁面template模板的代碼，只需在script部分修改全局的data屬性的值即可重新渲染頁面

如將按鈕的title(key)綁定為data里指定的值<input type="button" value="按鈕" v-bind:title="mytitle">

     <div>

　　　　　　<input type="button" value="按鈕" v-bind:title="mytitle">

          <input type="button" value="按鈕" v-on:click="show">

     </div>

 

    <script src="../node_modules/vue/dist/vue.js"></script>

    <script type="text/javascript">

    var vm = new Vue({

        el:"#app",

        data:{

            msg:'shanben',

            msg2:'<p>使用v-html轉意成html</p>',

            mytitle:'這是個自定義的title'

        },

        methods:{

            show:function(){

                alert('Hello')

            }

        } 

    });

    </script>

</body>

</html>

 

我們發現：

v-bind:title="mytitle"，其中的key取決於該組件中自帶的或者封裝好的屬性，title就是butten組件中自帶的一個屬性；

而等號=后面的就是我們的data數據了

又如

我們可以控制一個輸入框input的是否可輸入或者是控制一個button按鈕是否可點擊，可以使用v-bind:'需要綁定的值'='表達式'，（如：  :disabled=“返回boolean的表達式”等）

其中：是v-bind的冒號縮寫

 

 

二、v-model

v-model是vue.js中內置的雙向數據綁定指令，用於表單控件以外的標簽是不起作用的(即只對表單控件標簽的數據雙向綁定有效)。

需要注意的是：

v-bind="要綁定的值，而且完全支持JavaScript"

只是單向綁定（用data去渲染頁面）

v-model="要綁定的值，而且完全支持JavaScript"

是雙向綁定(data<---------->頁面)

 

三、誤區

這里你會問了，那v-model的縮寫是什么呢，注意v-model是沒有縮寫的

至於:model是v-bind:model的縮寫，比如：<child :model="msg"></child>這種只是將父組件的真實數據傳遞到了子組件，並沒有實現子組件和父組件數據的雙向綁定，子組件child往往是一個帶有props屬性的封裝組件。

而其中的字段model是子組件中定義的一個props屬性，你也可以定義modelxxx，這沒有具體的含義，有區別的是子組件props屬性當中該字段的的類型type。詳情見我的另一篇博客vue中的prop組件封裝

 

如果這篇文章幫到了你，請給個好評吧b（￣▽￣）d