美文网首页
Vue表单输入绑定和样式绑定

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

作者: 橙赎 | 来源:发表于2019-12-12 18:24 被阅读0次
一、表单输入绑定

用 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>

相关文章

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

    一、表单输入绑定 用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正...

  • vue表单输入绑定

    祭出demo 你可以用v-model 指令在表单 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确...

  • Vue表单输入绑定

    基础用法 你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正...

  • vue 表单输入绑定

    v-model 指令能够绑定表单元素的value值,实现数据的双向绑定。 v-model会忽略表单元素原来的 va...

  • Vue - 表单输入绑定

    一、基础用法 你可以用 v-model 指令在表单 及 元素上创建双向数据绑定。它会根据控件类型自动选取正...

  • vue 表单输入绑定

    v-model在input,'textarea','select'中创建元素双向绑定 单选框radio 复选框ch...

  • Vue表单输入绑定

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

  • 第八节:Vue指令:v-model双向数据绑定

    关于双向数据绑定 Vue 还提供了 v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定。 v-mo...

  • 4,如何使用class进行样式的绑定

    vue中样式(使用vue进行样式的绑定) 第一种 对于不使用vue进行样式绑定使,直接class="thin ac...

  • 使用vue绑定class样式的写法

    1、vue绑定class样式,直接使用数组进行绑定 这是第二个标题 2、vue绑定class样式,直接使用三元表达...

网友评论

      本文标题:Vue表单输入绑定和样式绑定

      本文链接:https://www.haomeiwen.com/subject/ppjogctx.html