vue2.0——v-model指令
来源：互联网 发布：现货外盘软件 编辑：程序博客网 时间：2024/05/21 07:47
<!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>
0 0
- vue2.0——v-model指令
- Vue2 指令v-on v-model 各种表单控件
- vue2.x自定义组件上使用v-model指令
- vue2.0——v-bind
- Vue2.0-4 -指令v-bind 与 v-on 缩写
- vue--v-model指令
- Vue2 指令v-bind v-pre v-cloak v-once
- v-model和v-for指令
- v-model和v-for指令
- v-model和v-for指令
- Vue2 指令v-if v-show v-for v-text v-html
- vue2.0 自定义指令
- Vue2.0-3-指令
- vue2.0自定义指令方式
- vue2.0 v-bind的用法
- VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器)
- 浅谈 Vue v-model指令的实现原理
- 5-Vue指令之双向数据绑定 V-model
- 一 ： BlockingQueue接口
- UML 用例图中<<include>>,<<extends>>,<<uses>>的区别
- 进阶篇_STL详解（函数模板特化，类模板特化，用模板实现自己的通用算法）
- ORA-12505, TNS:listener does not currently know of SID given in connect descriptor
- Apache 2.4 局域网发布网站
- vue2.0——v-model指令
- 2017年五一单身狗准备怎么过？
- 动态代理JDKf方式InvocationHandler、Proxy
- Flex布局新旧混合写法详解（兼容微信）
- 卷积神经网络图像风格转移 Image StyleTransfer Using Convolutional Neural Networks
- C#中String类的几个方法(IndexOf、LastIndexOf、Substring)
- 欢迎使用CSDN-markdown编辑器
- Java Socket 的工作机制
- Qt Creator在Windows上的调试器安装与配置
