Vue学习之v-model使用
1、打开WebStorm开发工具，新建‘test.html’文件，将vue.js放入同个目录内，并引入到页面。
<script type="text/javascript" src = "vue.js"></script>
2、在body内添加form标签，v-model只能用在form标签中，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src = "vue.js"></script>
<title>Title</title>
</head>
<body>
<form id="app">
<input type="text" v-model="msg">
{{msg}}
</form>
<script>
var vue = new Vue({
el : "#app",
data:{
msg: "",
}
})
</script>
</body>
</html>
3、打开页面，在input内输入内容，会在p标签中同步显示，这就是v-model的基本特性
4、将input标签改为复选框，可以多选，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src = "vue.js"></script>
<title>Title</title>
</head>
<body>
<form id="app">
<input type="checkbox" id="jack" value="Jack" v-model="msg">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="msg">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="msg">
<label for="mike">Mike</label>
您的选择是{{msg}}
</form>
<script>
var vue = new Vue({
el : "#app",
data:{
msg: [],
}
})
</script>
</body>
</html>
5、打开页面，点击复选框内容时，会在p标签的数组中显示
6、将input标签改为单选框，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src = "vue.js"></script>
<title>Title</title>
</head>
<body>
<form id="app">
<input type="radio" id="one" value="One" v-model="msg">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="msg">
<label for="two">Two</label>
您的选择是{{msg}}
</form>
<script>
var vue = new Vue({
el : "#app",
data:{
msg: "",
}
})
</script>
</body>
</html>
7、打开页面，点击单选框内容时，会在p标签的中显示
声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。
阅读量：125
阅读量：39
阅读量：162
阅读量：87
阅读量：139