【Vue.js学习笔记】18：class对象绑定,表单控件绑定,表单修饰符

学习b站上的小马视频。

class对象绑定

在Vue中可以绑定一个class，也可以绑定集成了多个class的对象，可以操作这些class的启用与否来影响所使用的CSS。这部分实际上就是前面学的动态绑定CSS样式的一种方式。

<template>
  <div>
    <div v-bind:class="myClass">文本div>
    <button @click="btnClick">改变classbutton>
  div>
template>

<script>
  export default {
    name: "bind_class",
    data() {
      return {
        myClass: {
          red: true,
          big: true
        }
      }
    },
    methods: {
      btnClick() {
        this.myClass.big = !this.myClass.big;
      }
    }
  }
script>

<style scoped>
  .red {
    color: red;
  }

  .big {
    font-weight: bolder;
    font-size: 64px;
  }
style>

运行结果：

点击按钮后

表单控件绑定

将数据模型绑定到表单控件，方便处理和提交。

<template>
  <div>
    
    <input type="text" v-model="name" placeholder="请输入name">
    <p>name={{name}}p>
    <hr>
    
    <label>苹果
      <input type="checkbox" value="apple" v-model="fruit">
    label>
    <label>香蕉
      <input type="checkbox" value="banana" v-model="fruit">
    label>
    <label>橘子
      <input type="checkbox" value="orange" v-model="fruit">
    label>
    <p>fruit={{fruit}}p>
    <hr>
    
    <label>男
      <input type="radio" value="1" v-model="gender">
    label>
    <label>女
      <input type="radio" value="0" v-model="gender">
    label>
    <p>gender={{gender}}p>
    <hr>
    
    <label>城市
      <select v-model="city">
        <option value="HZ">杭州option>
        <option value="NJ">南京option>
        <option value="SH">上海option>
      select>
    label>
    <p>city={{city}}p>
  div>
template>

<script>
  export default {
    name: "bind_form",
    data() {
      return {
        name: "flora",
        fruit: [],//绑定给了复选框,所以要用数组
        gender: "",
        city: ""
      }
    }
  }
script>

<style scoped>

style>

运行结果：

表单修饰符

针对用户输入的内容进行一些规范和整理。

• .lazy：正在输入时不改变数据模型的值，而在onchange事件发生时去改变，可以提高页面的处理效率，在需要即时检查的情况下不适用。
• .number：将输入转换为数值类型，输入非数值时得到NaN。
• .trim：去掉用户输入两端的空白。

<template>
  <div>
    <input type="text" v-model.lazy="username" placeholder="用户名">
    <p>username={{username}}p>
    <input type="number" v-model.number="age" placeholder="年龄">
    <p>age={{age}}p>
    <textarea v-model.trim="address" placeholder="地址">textarea>
    <p>address={{address}}p>
  div>
template>

<script>
  export default {
    name: "form_xsf",
    data() {
      return {
        username: "",
        age: 0,
        address: ""
      }
    }
  }
script>

<style scoped>

style>

运行结果：