Vue 的 v-model, v-text, v-html 区别

• v-model 表示和表单输入域的值绑定, 适用于 input, textarea, select 标签, 即普通文本输入域, 多行文本输入域, 单选按钮, 复选按钮, 下拉选择. 有双向绑定的效果
• v-text 表示 dom 节点内的普通文本, 与双大括号 {{message}} 等效, 只是单向绑定, 即修改变量值会影响页面展示, 但是页面展示内容改变, 不会影响 data 变量的值. 不会有 xss 风险
• v-html 表示 dom 节点内的 html 文本, 与 v-text 类似, 不过会将里面的内容认为 html 标签来展示, 注意如果是用户输入的, 有 xss 风险

<div id="app" v-cloak>


    <!--
    https://cn.vuejs.org/v2/guide/forms.html
    -->

    <!--text 和 textarea 监听 input 事件, 操作 value 值-->

    <div>
        <!--普通输入域 text, 使用 v-model 会忽略手动声明的 value 值-->
        <input type="text" v-model="message"/>
    </div>

    <div>
        <!--多行输入域 textarea, 使用 v-model 会忽略 textarea 内的文本值 -->
        <!--务必使用 v-model 方式, 如果 <textarea>{{message}}</textarea> 没有双向绑定效果, 是单向绑定 -->
        <textarea v-model="message">这里的值会被忽略</textarea>
    </div>

    <!--radio 和 checkbox 监听 change 事件, 操作 checked 值
        单选按钮 / 多选按钮会忽略手动声明的 checked 值 -->

    <!--
      相同 name 表示同一组单选按钮
      不同 id 可以为 label 服务
      value 是当前 radio 标签的值
      v-model 表示单选组被勾选的值
      -->

    <!--单选按钮 radio-->
    <div>
        <input type="radio" name="radioGroup" id="radio-1" value="1" v-model="radioValue"/>
        <!--label 的 for 对应元素 id-->
        <label for="radio-1">单选值 1</label>
        <input type="radio" name="radioGroup" id="radio-2" value="2" v-model="radioValue"/> <label for="radio-2">单选值 2</label>
        <input type="radio" name="radioGroup" id="radio-3" value="3" v-model="radioValue"/> <label for="radio-3">单选值 3</label>
    </div>
    <div>
        当前选中的单选值: {{radioValue}}
    </div>

    <!-- 复选按钮 checkbox-->
    <div>
        <input type="checkbox" name="checkboxGroup" id="checkbox-1" value="1" v-model="checkboxValue"/><label for="checkbox-1">复选值 1</label>
        <input type="checkbox" name="checkboxGroup" id="checkbox-2" value="2" v-model="checkboxValue"/> <label for="checkbox-2">复选值 2</label>
        <input type="checkbox" name="checkboxGroup" id="checkbox-3" value="3" v-model="checkboxValue"/> <label for="checkbox-3">复选值 3</label>
    </div>
    <div>
        当前选中的复选值: {{checkboxValue}}
    </div>

    <!--select 监听 change 事件, 操作 selected 值
    下拉选择 select, 会忽略手动声明的 option selected 值 -->
    <div>
        <select v-model="selectValue">
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
        </select>
    </div>
    <div>
        当前下拉选择的值: {{selectValue}}
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    const app = new Vue({
        // 对应的 dom 选择器
        el: '#app',
        // 数据
        data: {
            message: '这里一条消息',
            // 单选是单个值, 默认值
            radioValue: 2,
            // 复选是数组, 默认值
            checkboxValue: [2, 3],
            // 下拉选择 默认值
            selectValue: 2,
        }
    });
</script>