Vue演练场基础知识（二）表单绑定+条件渲染

为学习Vue基础知识，我动手操作通关了Vue演练场，该演练场教程的目标是快速体验使用 Vue 是什么感受，设置偏好时我选的是选项式 + 单文件组件。以下是我结合深入指南写的总结笔记，希望对Vue初学者有所帮助。

五. 表单绑定

学会了用v-bind绑定文本显示和用v-on绑定事件处理后，我们就能实现双向绑定，让我们的输入同步展示在页面上了。比如下面的代码就能实现在input输入框输入文字时，数据属性text同步更新，且输入框和p标签也同步展示输入的文字。

<script>
export default {
  data() {
    return {text: ''};
  },
}
</script>

<template>
  // v-bind + v-on
  <input
    :value="text"
    @input="event => text = event.target.value"
  />
  <p>你的输入是：{{text}}</p>
</template>

下面再看一个v-model指令，它是一个可以简化双向绑定的语法糖。

<template>
  // v-model 代替了 v-bind:value + v-on:input
  <input v-model="text" />
  <p>你的输入是：{{text}}</p>
</template>

表单元素双向绑定的规律总结

在表单创建中v-model会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

• 文本类型的<input>和 <textarea> 元素会绑定 value property 并侦听 input 事件；
• <input type="checkbox"> 和 <input type="radio">会绑定 checked property 并侦听 change 事件；
• <select> 会绑定 value property 并侦听 change 事件。

绑定v-model后，原本的 DOM 属性和事件会失效，元素以v-model绑定的变量为准。

<input
    v-model="text"
    value="123" // 这一行无效，value值以v-model为准
/>

表单元素双向绑定的实例列举

输入框

代码示例：

<template>
  <input v-model="text" />
  <p>你的输入是：{{text}}</p>
</template>

多行输入

代码示例：

<template>
  <textarea v-model="text" />
  <p style="white-space: pre-line;">你的输入是：{{text}}</p>
</template>

textarea不支持插值表达式。

<textarea>在这里写的内容是无效的</textarea> 

复选框

复选框没有绑定value的属于单个复选框，一般用来选择“是”或“否”；
复选框绑定了value的属于复选框列表，一般用来在多个选项中选中0～n个选项。

单个复选框

1. 默认情况下，单个复选框会双向绑定一个布尔类型变量：true代表【选中】，false代表【不选中】。选中/取消选中时会把对应的布尔值赋值给该变量。
2. true-value和false-value属性
   1. 设置了v-model后才能设置它们；
   2. 设置后true-value的值代替true成为代表【选中】的值，false-value的值代替false成为代表【不选中】的值，单个复选框双向绑定的变量也要改成使用和它们一样的数据类型；
3. 设置label标签的for属性和<input type="checkbox">标签的id属性，且两个属性相等，就能实现点击label文本触发checkbox选中的效果。
4. 在表单提交时，通常只有选中的复选框的值才会被提交到服务器端进行处理，未选中的复选框则被忽略。如果希望保证表单提交时会包含"yes"或"no"的其中之一，应用两个单选按钮代替单个复选框。

<input type="radio" v-model="checked" :value="yes" />
<input type="radio" v-model="checked" :value="no" />

代码示例：

<script>
export default {
  data() {
    return {toggle: 'yes'};
  },
}
</script>

<template>
    <input
        type="checkbox"
        v-model="toggle"
        id="checkbox-like"
        true-value="yes"
        false-value="no"
    />
    <label for="checkbox-like">你喜欢猫吗？</label>
    <p>你的选择是：“{{toggle}}”</p>
</template>

复选框列表

1. 复选框列表的特征：存在多个连续的复选框，每个都传入了不同的value属性，且每个都与同一个数组类型的变量双向绑定了。选中/取消选中其中一个复选框时，会把对应的value插入数组或从数组中删除。若一个复选框的value出现在数组中，代表它是被选中的。
2. 不要设置true-value和false-value属性，value属性是复选框列表上必传的属性且优先级比它们更高。
3. v-model在复选框上覆盖的是checked属性，不是value属性。

<script>
export default {
  data() {
    return {
        options: ['面包','牛奶','鸡蛋'],
        checkedOptions: []
    };
  },
}
</script>

<template>
    <ul v-for="opt in options" :key="opt">
        <input
            type="checkbox"
            v-model="checkedOptions"
            :id="opt"
            :value="opt"
        />
        <label :for="opt">{{opt}}</label>
    </ul>
    <p>你的选择是：{{checkedOptions}}</p>
</template>

单选按钮

1. 单选按钮的特征：存在多个连续的单选按钮，每个都上传入了不同的value属性，且每个都与同一个非数组类型（通常是字符串类型）的变量双向绑定了。选中其中一个单选按钮时，会把对应的value赋值给双向绑定的变量。只能另选其他选项，无法取消选中。
2. 不要设置true-value和false-value属性，value属性是单选按钮上必传的属性且优先级比它们更高。
3. v-model在复选框上覆盖的是checked属性，不是value属性。
4. 单选按钮只能选中1个，复选框列表若不加限制的话可选中0～n个。

<script>
export default {
  data() {
    return {
        options: ['面包','牛奶','鸡蛋'],
        checkedOption: '面包'
    };
  },
}
</script>

<template>
    <ul v-for="opt in options" :key="opt">
        <input
            type="radio"
            v-model="checkedOption"
            :id="opt"
            :value="opt"
        />
        <label :for="opt">{{opt}}</label>
    </ul>
    <p>你的选择是：{{checkedOptions}}</p>
</template>

下拉框

单选下拉框

1. 单选下拉框的特征：存在一个<select>标签，与一个非数组类型（通常是字符串类型）的变量双向绑定了。<select>标签底下有多个连续的<option>标签，每个<option>都上传入了不同的value属性。选中其中一个<option>选项时，会把对应的value赋值给与<select>双向绑定的变量。只能另选其他选项，无法取消选中。
2. 下拉框怎么做出类似输入框的placeholder的效果？
   设置一个不可选的且value等于空字符串的 标签，作为下拉框的第一个选项，option的文字写你希望展示的placeholder。然后把 绑定变量的初始值也设置为空字符串，这样就实现了下拉框默认选择第一个选项并展示placeholder文字，同时又不会影响用户输入。

<script>
  export default {
    data() {
      return {
        checkedOption: '',
        options: [
          { value: 'cat', text: '猫' },
          { value: 'dog', text: '狗' },
          { value: 'bird', text: '鸟' }
        ]
      }
    },
  }
</script>

<template>
  <select v-model="checkedOption">
    <option value="" disabled>～请选择～</option>
    <option v-for="item in options" :value="item.value">
      {{item.text}}
    </option>
  </select>
  <p>你的选择是“{{checkedOption}}”</p>
</template>

多选下拉框

1. 单选下拉框的特征：存在一个<select>标签，与一个数组类型的变量双向绑定了，并且设置了multiple = true。<select>标签底下有多个连续的<option>标签，每个<option>都上传入了不同的value属性。选中/取消选中其中一个<option>选项时，会把对应的value插入数组或从数组中删除。

<script>
  export default {
    data() {
      return {
        checkedOption: ['cat'],
        options: [
          { value: 'cat', text: '猫' },
          { value: 'dog', text: '狗' },
          { value: 'bird', text: '鸟' }
        ]
      }
    },
  }
</script>

<template>
  <select v-model="checkedOption" multiple>
    <option value="" disabled>～请选择～</option>
    <option v-for="item in options" :value="item.value">
      {{item.text}}
    </option>
  </select>
  <p>你的选择是“{{checkedOption}}”</p>
</template>

v-model指令的修饰符

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

<!-- 用户输入自动转换为数字，若转不了（无法被 parseFloat() 处理）就返回原值 -->
<input v-model.number="age" />
<!-- 相当于 -->
<input type="number" v-model="age" />

<!-- 自动去除用户输入内容中两端的空格 -->
<input v-model.trim="msg" />

组件上的 v-model

待更新。

六. 条件渲染

v-if指令能有条件地渲染元素，若一个元素设置了v-if属性，则只有当v-if的值为真值时该元素才会渲染。与之配套的还有v-else-if指令、v-else指令。

<script>
export default {
    data() {
        return {isTVOpen: true}
    },
}
</script>

<template>
    <button @click="isTVOpen = !isTVOpen">切换</button>
    <div v-if="isTVOpen">电视打开了</div>
    <div v-else>电视关闭了</div>
</template>

如果我们想有条件地渲染多个连续的元素，除了给每个元素都加上一样的v-if指令，还有一种更简洁的办法：用template标签把要控制的多个元素包起来，v-if加在template上。其中的template只是起到一个包装器的作用，渲染结果并不会包含它。

…
<template v-if="show">
    <div>显隐可控元素1</div>
    <div>显隐可控元素2</div>
    <div>显隐可控元素3</div>
</template>
…

此外，v-show指令也可以控制元素显隐，但它只是加一个隐藏样式，且不能与v-else连用，也不能加在template标签上。

• v-if控制组件的结果：

  • 若初次渲染时v-if为真，正常渲染。
  • 若初次渲染时v-if为假，跳过该组件，不做任何事。
  • v-if的值切换为真时，重新渲染该组件，绑定事件监听器，渲染子组件。
  • v-if的值切换为假时，卸载该组件，销毁事件监听器，卸载子组件。

• v-show控制组件的结果：

  • 若v-show的值为真，正常渲染。
  • 若v-show的值为假，则组件被添加"display: none"的样式，使用户看不到它。

频繁切换v-if的开销较大，因为每次都要重装/卸载整个组件，但被v-if隐藏的组件才是真的消失了，比如：若一个v-if等于false的组件是表单中的一部份数据项，表单提交时就不会包含这部分数据项了。
v-show则只在初始时渲染一次整个组件，之后不再重装和卸载，只修改display样式，更适合组件需要频繁切换显隐的需求。但需要注意，被v-show隐藏的组件仅仅是视觉上看不到了，实际上组件更新、数据收集等特性还是和正常存在的组件是一样的。