绵阳梓潼网站制作公司

Vue中v-model指令怎么使用

本文小编为大家详细介绍“Vue中v-model指令怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue中v-model指令怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

创新互联建站是一家专业提供合作企业网站建设,专注与网站制作、成都做网站、H5网站设计、小程序制作等业务。10年已为合作众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

Vue中v-model指令怎么使用

基础用法

在Vue中，通过{{}}或v-text的方式，可以将数据源中的数据渲染到DOM元素中。

比如：



{{ message }}


let app = new Vue({
    el: '#app',
    data: {
        message: 'Hello W3cplus! (^_^)'
    }
})

Vue中v-model指令怎么使用

基于上面的示例，咱们修改一下需求，我们想通过一个的输入来修改{{message}}。这个时候我们就需要使用到v-model。先来看示例，再聊v-model。在上面示例的基础上添加一个input，修改后的模板代码如下：



    

        
    

    
{{ message }}

Vue中v-model指令怎么使用

从效果中可以看出，修改input的value值，对应的h2元素的内容也修改了。这种效果就是数据双向绑定的效果。

而这里关键点就是使用了v-model指令。在Vue中，可以使用v-model指令在表单控件元素上创建双向数据绑定。它会根据控制类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它会选择Vue实例数据来作为具体的值。你应该通过JavaScript在组件的data选项中声明初始值。

在Vue中，v-model主要是用于表单控件上。那么接下来，咱们来看看v-model在常见的表单控件上是怎么使用的。

单行文本输入框

前面演示的示例其实就是单行文本输入框的效果。input上通过v-model绑定Vue的数据源的值。当input输入值一旦发生变更时，数据也会相应发生变化，从而元素渲染的插值也会做出相应变化。

这里的data可以是object或者function，但组件的data只能是function，这是因为组件内各自拥有自己的data，而非共用的关系。不过今天我们不看组件中的数据双向绑定，只是简单的看表单控件方面的。不跑题了，回到input框中来。我们一般在模板中像下面这样写代码：



    

        
    

    
{{ message }}

同样的，在Vue实例中，需要指定data，我们这个示例是指message：

let app = new Vue({
    el: '#app',
    data: {
        message: 'Hello W3cplus! (^_^)'
    }
})

刷新你的浏览器，当你修改input的输入值时，对应的可以看到h2元素内容的同步变化，效果如下图所示：

Vue中v-model指令怎么使用

多行文本域

多行文本域textarea和input非常的类似。比如把上面示例中的input换面textarea表单元素，同样的将v-model="message"绑定在textarea元素上。模板代码像下面这样：



    

        
    

    
{{ message }}

咱们在textarea中修改内容，对应的h3也会有变化：

Vue中v-model指令怎么使用

小结一下：当使用文本input(包括email，number等)或textarea时，v-model="varName"等价于:value="varName" @input="e => varName = e.target.value"。这意味着每次输入完成后的varName将被更新为输入的值，然后输入的值被设置为varName。正常的select元素也会像这样，尽管multiple多项选择有所不同。

在文本区域插值 () 并不会生效，应用 v-model 来代替。

复选框

在Vue中的复选框通过v-model绑定数据源，并不和我们Web表单中的复选框一样。比如下面的示例：




    
    {{checked}}



// JavaScript
let app = new Vue({
    data: {
        checked: false
    }
})

刷新浏览器，当复选框选中的时候，checked的值false就变成了true。如下图所示：

Vue中v-model指令怎么使用

不知道你跟我是不是同样的好奇，如果input复选框设置了checked（默认选中），会不会刷新浏览器，checked的值会不会变成true。从实战来看，是不会有变化的，只有选中之后，false才会变成true。另外再试一个效果，如果checked默认值不是false，是任何字符串，看看是什么效果？

Vue中v-model指令怎么使用

是不是很神奇，虽然默认选中，并且点击之后就在false和true之间切换。

上面的示例，咱们只使用单个复选框，从效果上告诉我们v-model会将其视为布尔值，并且会忽略该value。而且：

将和下面的代码相同：

 isChecked = e.target.checked" />

如果想要它是非布尔值，可以使用true-value和false-value属性，它控制当选择复选框时，模型将被设置成什么值。

与以下代码相同

 isChecked = e.target.checked？'1':'0'">

单一复选框的情况差不多就是这样。如果有多个复选框共享一个数据源（v-model指定的值），那么这些复选框将填充一个数组，其值为所有勾选的复选框，但一定要在数据源中指定数据是一个数组类型，否则会产生一些奇怪的现象。来看一个多选项的示例：




    
    Jack
    
    John
    
    Mike



选中的值：{{checkedNames}}


// JavaScript
var app = new Vue({
    el: '#app',

    data: {
        checkedNames: []
    }
})

效果如下：

Vue中v-model指令怎么使用

当我们使用多个复选框时，true-value和false-value属性不再有效。同时在模板中像上面示例使用方式，很难保证一致性，所以最好的方式是将一些逻辑移到组件的方法上。不过我们这节并不介绍怎么应用到组件中，因为我们还没有学习Vue的组件怎么创建。如果你感兴趣的话，可以观注后续更新的内容，我们将会花一节内容来看看怎么完成自定义的复选框组件。

单选按钮

v-model在单选按钮上的使用，咱们先来上实例代码吧：



    

        
        CSS
        
        HTML
        
        JavaScript
        

        
你最喜欢的是：{{selected}}

    
  // JavaScript var app = new Vue({     el: '#app',       data: {         selected: null     } })

更新浏览器，看到的效果如下：

Vue中v-model指令怎么使用

选择框

v-model在选择框上的使用，可以运用在单项选择框和多项选择框，不同的是，多项选择框在数据源中应该是一个数组。比如下面的示例：



    
选择框

    

        
            请选择
            
            
            
        
        请选择: {{ selected }}
    

    

        
            
            
            
            
        
        请选择:{{multipleSelected}}
    



// JavaScript
var app = new Vue({
    el: '#app',

    data: {
        selected: null,
        multipleSelected: []
    }
})

效果如下：

Vue中v-model指令怎么使用

如果 v-model 表达初始的值不匹配任何的选项，     

你选择了: {{ selected }}
// JavaScript let app = new Vue({     el: '#pp',     data: {         selected: '请选择',         options: [             { text: 'One', value: 'CSS' },             { text: 'Two', value: 'HTML' },             { text: 'Three', value: 'JavaScript' }         ]     } })

效果是什么样呢？自己动手写一下。这里我们用到了Vue的一个新指令，那就是v-bind指令，他有什么功能或特性呢？咱们后续会学习。

上面向大家展示了v-model指令在常见的表单控件上的使用情况。建议大家自己动手撸一下代码，体会将会更深。

v-model的修饰符

v-model还有一些修饰符的功能，主要有.lazy、number和.trim。其主要功能是：

路们来看一个示例：



    
    
        
  • 
            
            
            {{message}}
        
    • 
        
  • 
            
            
            {{message}}
        
    • 
        
  • 
            
            
            {{message}}
        
    • 
        
  • 
            
            
            {{message}}
        
    • 
    



// JavaScript
var app = new Vue({
    el: '#app',

    data: {
            message: 'Hello W3cplus!(^_^)',
    }
})

刷新页面看效果：

Vue中v-model指令怎么使用

从上在的效果可以看出：

读到这里，这篇“Vue中v-model指令怎么使用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。


本文标题：Vue中v-model指令怎么使用
本文URL：http://myzitong.com/article/jiigph.html

其他资讯