vuejs之v-model

前端之家收集整理的这篇文章主要介绍了vuejs之v-model前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

看一个例子:

<html>

head>
  script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</bodydiv id="app">
    input type="text" v-model="message" @keyup.enter="getMsg"="button" value="修改" @click="setMsg"h2>{{message}}div>
    var app = new Vue({
      el: '#app',data: {
        message: '我是黄色',},methods: {
        getMsg: function () {
          alert(this.message);
        },setMsg: function () {
          this.message = "修改了message";
        },})
  >

效果

修改输入框里面的值,不需要点修改

下面数据同步更新。

点击修改

输入框的值和下面的值同步更新。

说明:

v-model指令的作用就是便捷地设置和获取表单元素的值。 

绑定的数据会和表单元素值进行关联。

其中一个改变都会导致另一个的改变。

猜你在找的Vue相关文章