《Vue.js实战》笔记-第六章
第六章
1. 第一节 表单与v-model
- practice_3.1.html
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style_3.css" />
<script src="Vue.js">script>
head>
<body>
<div id='first'>
<div>
<p class='title'>Radio单选：p>
<input type="radio" v-model='picked' value='html' id='html'>
<label for="html">HTMLlabel>
<br>
<input type="radio" v-model='picked' value='js' id='js'>
<label for="radio">Jslabel>
<br>
<input type="radio" v-model='picked' value='css' id='css'>
<label for="css">CSSlabel>
<br>
<p>您的选择是：{{picked}}p>
div>
<div>
<p class='title'>Checkbox复选单选：p>
<input type="checkbox" v-model="checked" id="checked">
<label for="checked">选择状态：{{checked}}label>
div>
<div>
<p class='title'>Checkbox复选框：p>
<input type="checkbox" v-model="checkedGroup" value='html' id="html">
<label for="html">HTMLlabel>
<br>
<input type="checkbox" v-model="checkedGroup" value='js' id="js">
<label for="js">Jslabel>
<br>
<input type="checkbox" v-model="checkedGroup" value='css' id="css">
<label for="css">CSSlabel>
<br>
<p>你的选择是：{{checkedGroup}}p>
div>
div>
<div id='second'>
<div>
<p class="title">单选下拉栏：p>
<select v-model="selected">
<option>htmloption>
<option value="js">JavaScriptoption>
<option>cssoption>
select>
<p>你的选择是：{{selected}}p>
div>
<div>
<p class="title">多选下拉栏：p>
<select v-model='selectedGroup' multiple>
<option value="html">htmloption>
<option value="js">JavaScriptoption>
<option value="css">CSSoption>
select>
<p>你的选择是：{{selectedGroup}}p>
div>
<div>
<p class="title">循环输出下拉栏：p>
<select v-model="selectedList">
<option v-for="option in options" :value="option.value">{{option.text}}option>
select>
<p>你的选择是：{{selectedList}}p>
div>
div>
body>
<script>
var first = new Vue({
el:'#first',
data:{
picked:'js',
checked:false,
checkedGroup:['html','css']
}
})
var second = new Vue ({
el:"#second",
data:{
selected:'html',
selectedGroup: ['html','js'],
selectedList:'css',
options:[
{
text:"HTML",
value:"html"
},
{
text:"JavaScript",
value:"js"
},
{
text:"css",
value:"css"
}
]
}
})
script>
html>
- style_3.1.css
div{
border: 1px solid blue;
}
.title{
font: 18px bold orange;
}
2.第二三节 绑定值 修饰符
- practice_3.2.html
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="style_3.2.css" />
<script src="Vue.js">script>
head>
<body>
<div id='first'>
<div>
<p>单选按钮：p>
<input type="radio" v-model='picked' :value='value'>
<label>单选选项label>
<p>{{picked}}p>
<p>{{value}}p>
div>
<div>
<p>复选框：p>
<input type="checkbox" v-model='toggle' :true-value="value1" :false-value="value2">
<label>复选框label>
<p>{{toggle}}p>
<p>{{value1}}p>
<p>{{value2}}p>
div>
<div>
<p>选择列表：p>
<select v-model='selected'>
<option v-for="option in options" :value="option.value">{{option.text}}option>
select>
<br>
你选择的是：{{selected}}
div>
<div>
<select v-model='selectedNum'>
<option :value="{ number: 123}">123option>
<option :value="{ number: 1}">1option>
select>
<br>
你选择的是：{{selectedNum.number}}
div>
<div>
<p class="title">lazy：{{message}}p>
<input type="text" v-model.lazy="message">
div>
<div>
<p class="title">number：{{number}}p>
<input type="number" v-model.number="number">
div>
<div>
<p class="title">trim：{{text}}p>
<input type="text" v-model.trim="text">
div>
div>
<script>
var first = new Vue({
el: '#first',
data: {
picked: false,
value: 123,
toggle: false,
value1: 'a',
value2: 'b',
selected: '',
selectedNum: '',
message: '',
number: 520,
text: "",
options: [
{
text: "HTML",
value: "html"
},
{
text: "JavaScript",
value: "js"
},
{
text: "css",
value: "css"
}
]
}
})
script>
body>
html>
- style_3.2.css
div{
border: 1px solid blue;
}
.title{
font: 18px bold orange;
}