Vue表单输入绑定和样式绑定

一、表单输入绑定

用 v-model 指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

• v-model 适用于文本，也适用于多行文本域，复选框，下拉列表框

 <input v-model="message" >
        <p>输入的内容是{{ message }}</p>

jl2.gif

---

修饰符

• .lazy：在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步
• number：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
• trim：如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim修饰符

二、Class 与 Style 绑定

• 绑定对象

可以传给 v-bind:class 一个或多个对象，以动态地切换 class。例如：

<style>
      .active{color:blue}
      .size{font-size:16px}
</style>

<div id="app">
<div :class="{ active:"yes",size:"yes" }">样式</div>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
              yes:true
        }
    });
</script>

• 绑定数组

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表.例如：

<style>
      .active{color:blue}
      .size{font-size:16px}
</style>

 <div id="app">
        <div :class=[active,size]>样式</div>
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                active: "active",
                size: "size"
            },

        })
    </script>

• 绑定样式

v-bind:style的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

  <div id="app">
        <div :style="fontstyle">样式1</div>
  </div>
    <script src="js/vue.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                fontstyle: { color: "red", fontSize: "28px" },
            },
        })
    </script>