v-bind与v-model

137 阅读1分钟

v-bind

  1. v-bind的作用:让属性展现动态的效果
  2. v-bind的语法格式:v-bind:参数=“表达式”,简写 :参数=“表达式”
  3. v-bind的编译原理:参数会被编译为属性名,表达式内有data数据,会产生动态连带效果。
  4. 原理上参数可以随便写,但是还是要写属性名,否则没用属性名=属性值,属性值内部不可以写{{ data的变量}}
  5. div等无value属性的。
 <input type="text" :value="name" id="app"></input>
    <script>
          new Vue({
            el:"#app",
            data:{
                name:"张三"
            }
            })
    </script>

v-model

  1. v-model的作用:数据与视图之间双向绑定的作用。v-bind数据向视图单向绑定。
  2. v-model的写法:v-model:value="表达式" 只能绑定有value属性的标签。因为v-model是双向数据绑定。简写v-model="表达式" 3.v-model只能写data声明的变量,不能写表达式。因为双向数据绑定。v-bind可以是常量,表达式等
 <input type="text" id="app" v-model="msg"></input>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"张三"
            }
        })
    </script>