静下心，抄一段sample，以后可以快点到这里来抄。。。：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="demo.css" />
</head>
<body>
<div id="app">
<input type="text" v-model="message" />
<span>Your input is: {{ message }}</span>
<p></p>
<label><input type="radio" value="male" v-model="gender">男</label>
<label><input type="radio" value="female" v-model="gender">女</label>
<p>{{gender}}</p>
<input type="checkbox" v-model="checked" />
<span> checked: {{checked}}</span>
<p></p>
<label><input type="checkbox" value="1" v-model="multiChecked">1</label>
<label><input type="checkbox" value="2" v-model="multiChecked">2</label>
<label><input type="checkbox" value="3" v-model="multiChecked">3</label>
<p>multiChecked: {{multiChecked.join(‘|‘)}}</p>
<select v-model="selected">
<option selected>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<span> Selected: {{selected}}</span>
<p></p>
<select v-model="multiSelected" multiple>
<option selected>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<span> MultiSelected: {{multiSelected.join(‘|‘)}}</span>
<p></p>
<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b">
<span> checked: {{checked}}</span>
<p></p>
<input type="radio" v-model="checked" v-bind:value="a">
<span> checked: {{checked}}</span>
<p></p>
<select v-model="selected">
<option v-bind:value="{number: 123}"> 123</option>
</select>
<span> Selected: {{selected}}</span>
<p></p>
<div class="tab" v-bind:class="{‘active‘: active, ‘unactive‘: !active}">
</div>
<div v-bind:class="[classA, classB]"></div>
<div v-bind:style="alertStyle"></div>
</div>
<template v-if="yes">
<p>This is 1 dom</p>
<p>This is 2 dom</p>
<p>This is 3 dom</p>
<p>This is 4 dom</p>
</template>
</body>
<script src="http://cdn.bootcss.com/vue/2.2.4/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "",
gender: "",
checked: "",
multiChecked: [],
selected: "",
multiSelected: [],
a: "a",
b: "b",
yes: true,
active: true,
classA: ‘class-a‘,
classB: ‘class-b‘,
alertStyle: {
color: "red",
fontSize: "20px"
}
}
})
</script>
</html>
时间： 2024-10-03 22:54:08