美文网首页
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