vuejs 获取 Input 值

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Index Page</title>
</head>

<body>
  <form action="" id="demo">
    <input type="text" value="调试 vuejs 2.0" ref="input1">
    <a href="javascript:void(0)" v-on:click="test1">测试</a>
    <br>
    <span>{{ result1 }}</span>
    <br>

    <input type="text" v-model="input2">
    <a href="javascript:void(0)" v-on:click="test2">测试</a>
    <br>
    <span>{{ result2 }}</span>
  </form>

  <script src="http://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script>
  <script type="text/javascript" src="demo.js"></script>
</body>

</html>

new Vue({
    el: "#demo",

    data: {
        result1: null,
        result2: null,
        input2: ""
    },

    created: function() {
        // the created hook is called after the instance is created
    },

    methods: {
        test1: function () {
            this.result1 = this.$refs.input1.value + " 成功!";
        },

        test2: function () {
            this.result2 = this.input2 + " 成功!";
        }
    }
})

posted @ 2017-09-22 16:14 侠岚之弋痕夕阅读(17648) 评论(0) 编辑收藏举报

刷新页面返回顶部

侠岚之弋痕夕

vuejs 获取 Input 值

公告