Vue：vue基础知识之利用v-model指令
1、结果界面显示
2、v-model.html文件代码
<!DOCTYPE html>
<html lang="en">
<head>
<title><!DOCTYPE html>
<html lang="en">
<head>
<title>v-v-model数据源绑定实例</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type='text/javascript' src='../assets/js/vue.js' ></script>
</head>
<body>
<h1>v-model数据源绑定实例啦</h1>
<hr>
<div id="app" >
<!-- 模板的输出方式，把message变量渲染到模板里 -->
<p>原始文本信息{{message}} 我是Jason Niu</p>
<h3>文本框</h3>
<!-- lazy属性延缓加载数据、number属性必须是数字、trim前后去空格 -->
<p>v-model:<input type='text' v-model='message'> </p>
<p>v-model.lazy:<input type='text' v-model.lazy='message'> </p>
<p>v-model.number:<input type='text' v-model.number='message'> </p>
<p>v-model.trim:<input type='text' v-model.trim='message'> </p>
<hr>
<h3>文本域双向绑定</h3>
<textarea cols='30' rows='10' v-model='message'></textarea>
<h3>多选框绑定一个数值</h3>
<input type='checkbox' id='isTrue' v-model='isTrue'>
<label for='isTrue'>{{isTrue}}</label>
<hr>
<p>
<!-- 定义选择按钮 -->
<h3>多选框绑定数组</h3>
<input type='checkbox' id='JasonNiu' value='JasonNiu_value' v-model='web_names'>
<label for='isTrue'>JasonNiu</label>
<input type='checkbox' id='Jason' value='Jason_value' v-model='web_names'>
<label for='isTrue'>Jason</label>
<input type='checkbox' id='Niu' value='Niu_value' v-model='web_names'>
<label for='isTrue'>Niu</label>
</p>
<!-- 将勾选选择按钮时，内容插到页面上 -->
<P>{{web_names}}</P>
<hr>
<h3>多选框绑定数组</h3>
<p>
<input type='radio' id='one' value='男' v-model='sex'>
<label for='one'>男</label>
<input type='radio' id='two' value='女' v-model='sex'>
<label for='two'>女</label>
<p>你选择的性别是：{{sex}}</p>
</p>
</div>
<script type='text/javascript'>
//声明变量且实例化(生成器)
var app =new Vue({
el:'#app',
data:{
message:'欢迎进入机器学习的世界！',
isTrue:true,
web_names:[],
sex:'男'
}
})
</script>
</body>
</html>