close

[展示過程]

 

 

 

stpe1、引用外部cdn

 

step2、實作過程

使用控制項的v-model屬性 去 bind 宣告的變數，當此控制項的輸入變動時，

即可動態局部的更新頁面上該變數所指定的區塊。

 

code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            <h1>{{ message }}</h1>
            <input type="text" v-model="message">
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
        <script>
            var data = {
                message:'Hello World!'
            }
            new Vue({
                el:'#app',
                data:data
            });
        </script>
    </body>
</html>

 

線上測試平台：

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default

 

arrow
arrow
    文章標籤
    vue.js 基礎應用_控制項動態及時輸入
    全站熱搜

    米拉尤咕 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄