美文网首页
Vue安装与语法2019-08-13

Vue安装与语法2019-08-13

作者: 白富美也在学代码 | 来源:发表于2019-08-13 14:35 被阅读0次

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>无标题文档</title>

    </head>

    <body>

    <div id="app">

        <input type="text" v-model="name"/>

    <span v-show="name">您的名字是:{{name}}</span>

    </div>

    <div id="app2">

        <div>

        <input type="text" v-model="name"/>

    <span v-show="name">您的名字是:{{name}}</span>

        </div>

    <div>

        <input type="text" v-model="age"/>

    <span v-show="age">您的年龄是:{{age}}</span>

        </div>

    <div>

        <input type="text" v-model="sex"/>

    <span v-show="sex">您的性别是:{{sex}}</span>

        </div>

    <div>

        <input type="text" v-model="phone"/>

    <span v-if="phone">您的电话是:{{phone}}</span>

        </div>

    </div>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

    <script>

    var app=new Vue({

      el:'#app',

      data:{

          name:'zhangsan',

      }

    })

    var app2=new Vue({

      el:'#app2',

      data:{

          name:'lisi',

      age:18,

      sex:null,

      phone:null,

      }

    }) 

    </script>

    </body>

    </html>

    相关文章

      网友评论

          本文标题:Vue安装与语法2019-08-13

          本文链接:https://www.haomeiwen.com/subject/rjnvjctx.html