Vue.JS且戰且飛(十六)

2017 iT 邦幫忙鐵人賽

DAY 16

Modern Web

Vue.JS且戰且飛系列第 16 篇

2017鐵人賽 vue.js eagle 老鷹且戰且飛

老鷹(eagle)

2016-12-17 22:54:28

1242 瀏覽

分享至

JQuery + Vue.js

jsfiddle

<html>
<head>
    <meta charset="UTF-8">
    <title>JQuery + Vue.js</title>
</head>
<body>
<div id="show">
    <input type="text" id="test" value="tset">
    <input type="button" value="change string" v-on:click="changeString()">
</div>
</body>
<script src="vue.js"></script>
<script src="jquery-3.1.1.min.js"></script>
<script>
    new Vue({
        el: '#show',
        data: {
            message: 'eagle',
            text: 'IT Help'
        },
        created: function () {

        },
        mounted: function () {
            var change_string = this.message;
            $('#test').val(change_string);
        },
        methods: {
            changeString: function () {
                var change_string = this.text;
                $('#test').val(change_string);
            }
        }
    })

</script>
</html>