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