Vue框架很核心的功能就是双向的数据绑定。 
双向是指：Vue 对象的改变会直接影响到 HTML 的标签的变化，而且标签的变化也会反过来影响 Vue 对象的属性的变化。
v-model 指令用来在 <input> 、 <select>、 text、 checkbox、radio 等表单控件元素上创建双向数据绑定
1，
例子：
<body>
<div id="app">
    <span>文字输出到这里：</span>
    <p style = 'white-space:pre-line'>{{message}}</p>
    <br>
    <textarea v-model = 'message' placeholer = '请在此输入文字'></textarea>
</div>
    
    <script type="text/javascript" src="js/vue-resource.js" ></script>
    <script type="text/javascript" src="js/vue.min.js" ></script>
    <script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Vue 很强大！',
        },
    });
    </script>
</body>

当改变文本框的内容时，上面的一行数据也会改变

 

 

 

例子2，

 

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例中的数据来作为具体的值


 

当inetrest为数组时 三个复选框可以单个选择,返回的值时,游泳,唱歌,玩游戏.

 

 

当interest为空字符串时,点击某一个复选框,默认三个复选框都会被选中,返回的值时 true 或者false

 

 

 

例子3

 

 

返回值是value的值

 

例子4

 v-model 指令后还可以添加多个参数 （number、lazy、debounce）;

 

 lazy

  • 在默认情况下，v-model 在 input 事件中同步输入框的值与数据，我 们们可以添加一个 lazy 特性，从而将数据改到 change 事件中发生

  • 使用 lazy 参数是将双向数据同步的时间节点从 input 触发改为了 change 触发

2. number

  • 当传给后端的字段类型必须是数值的时候，我们可以在 v-model 所在的控件上使用 number 指令，该指令会在用户输入被同步到model 中时将其转换为数值类型
  • 如果原值的转换结果为 NaN,则返回原值 

 

 

 

该文章转载https://blog.csdn.net/WinSolstice/article/details/75172253

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue