vue2.0——v-model指令
2017-04-28 09:54
344 查看
<!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=utf-8" />
<title>v-model指令 06</title>
<script src="../assets/js/vue.js"></script>
<link type="text/css" rel="stylesheet" href="../assets/css/index.css" />
</head>
<body>
<h1>v-model 模型 用于表单 动态绑定 可以用v-bind</h1>
<hr />
<div id="app">
<p>原始文本:{{message}}</p>
<hr />
<h3>文本框</h3>
<P>v-model <input type="text" v-model="message" /></P>
<P>v-model.lazy 有三个修饰符 第一个是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>
<hr />
<h3>单选按钮</h3>
<p>
<input type="checkbox" id="dfddf" v-model="xz" />
<label for="dfddf">{{xz}}</label>
</p>
<hr />
<h3>多个单选框绑定一个数组</h3>
<p>
<input type="checkbox" id="jake" value="jake" v-model="xzArray" />
<label for="jake">jake</label>
<br />
<input type="checkbox" id="jone" value="jone" v-model="xzArray" />
<label for="jone">jone</label>
<br />
<input type="checkbox" id="tom" value="tom" v-model="xzArray" />
<label for="tom">tom</label>
<p>{{xzArray}}</p>
</p>
<br />
<h3>单选按钮</h3>
<input type="radio" id="one" value="true" v-model="danxuan" />
<label for="one">true</label>
<input type="radio" id="two" value="false" v-model="danxuan" />
<label for="two">false</label>
<p>{{danxuan}}</p>
<hr />
<h3>选择列表</h3>
<p>
<select v-model="selected" >
<option v-for="option in options" v-bind:value="option.value">
{{option.text}}
</option>
</select>
<p>Selected: {{selected}}</p>
</p>
</div>
<script>
var vm = new Vue({ //建立一个构造器
el:"#app", //构造器的作用域在哪里
data:{
message:'hello Vue!',
xz:false,
xzArray:[],
danxuan:'',
selected:'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
});
</script>
<script src="./webpack.js"></script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>v-model指令 06</title>
<script src="../assets/js/vue.js"></script>
<link type="text/css" rel="stylesheet" href="../assets/css/index.css" />
</head>
<body>
<h1>v-model 模型 用于表单 动态绑定 可以用v-bind</h1>
<hr />
<div id="app">
<p>原始文本:{{message}}</p>
<hr />
<h3>文本框</h3>
<P>v-model <input type="text" v-model="message" /></P>
<P>v-model.lazy 有三个修饰符 第一个是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>
<hr />
<h3>单选按钮</h3>
<p>
<input type="checkbox" id="dfddf" v-model="xz" />
<label for="dfddf">{{xz}}</label>
</p>
<hr />
<h3>多个单选框绑定一个数组</h3>
<p>
<input type="checkbox" id="jake" value="jake" v-model="xzArray" />
<label for="jake">jake</label>
<br />
<input type="checkbox" id="jone" value="jone" v-model="xzArray" />
<label for="jone">jone</label>
<br />
<input type="checkbox" id="tom" value="tom" v-model="xzArray" />
<label for="tom">tom</label>
<p>{{xzArray}}</p>
</p>
<br />
<h3>单选按钮</h3>
<input type="radio" id="one" value="true" v-model="danxuan" />
<label for="one">true</label>
<input type="radio" id="two" value="false" v-model="danxuan" />
<label for="two">false</label>
<p>{{danxuan}}</p>
<hr />
<h3>选择列表</h3>
<p>
<select v-model="selected" >
<option v-for="option in options" v-bind:value="option.value">
{{option.text}}
</option>
</select>
<p>Selected: {{selected}}</p>
</p>
</div>
<script>
var vm = new Vue({ //建立一个构造器
el:"#app", //构造器的作用域在哪里
data:{
message:'hello Vue!',
xz:false,
xzArray:[],
danxuan:'',
selected:'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
});
</script>
<script src="./webpack.js"></script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vue2.0——v-model指令
- vue2.0——v-model指令
- vue2.0——v-model指令
- vue2.0——v-model指令
- vue2.0——v-model指令
- vue2.0——v-model指令
- vue2.0——v-model指令
- vue2.0——v-model指令
- vue2.0——v-model指令
- vue2.0——v-model指令
- vue2.0——v-model指令
- vue2.0——v-model指令
- vue2.0——v-model指令
- Vue2.0-3-指令
- vue.js（2.0）常用指令总结以及一些指令的坑！
- 如何理解Vue的v-model指令的使用方法
- Vue 2.0 介绍与指令
- VUE指令-数据绑定v-model
- vue.js指令v-model实现方法
- Vue2.0-4 -指令v-bind 与 v-on 缩写