<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>START VUE</title>
<!--<script src="vue.js"></script>-->
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<style>
body{font-size: 13px;}
.title{font-weight: bold; border-bottom: 1px dotted #cccccc;}
</style>
</head>
<body>
<div id="app">
<p class="title">模板绑定:</p>
<p>{{message}}</p>
<p class="title">v-text绑定:</p>
<p v-text="message"></p>
<p class="title">v-html绑定:</p>
<p v-html="message"></p>
<p class="title">v-bind:vlaue, 单项:</p>
<p><input :value="message"/></p>
<p class="title">v-model, 双向</p>
<p><input v-model="message"/></p>
<p>
<button @click="changeVal">改变值</button>
</p>
<p class="title">v-for示例:</p>
<table border="1" style="border-collapse: collapse">
<th>中文名</th>
<th>英文名</th>
<th>年龄</th>
<th>性别(if else)</th>
<th>操作</th>
<tr v-for="(item,index) in passengers">
<td><input v-model="item.chineseName"/></td>
<!--这里不能用:value, 因为会初始化数据-->
<td><input v-model="item.englishName"/></td>
<td v-text="item.age"></td>
<td v-if="item.sex==1">男</td>
<td v-else-if="item.sex==2">女</td>
<td v-else>未知</td>
<td><button @click="remove(index)">删除</button></td>
</tr>
</table>
<button @click="addTableRow">添加一行</button>
<button @click="submitTable">提交表格</button>
<!--{{changeVal()}}-->
<p class="title">事件处理:</p>
<button @click="add">ADD, 不传参</button>
<button @click="add2('one')">ADD2, 传一个参数</button>
<button @click="add3('one', $event)">ADD3, 传两个参数</button>
<p class="title">演示事件传播:</p>
<div @click="parentMethod" style="background-color: #00F7DE; height:100px; width:100px; padding:10px">
<div @click.stop="subMethod" style="background-color: red; height:50px; width:50px">
子级(点我)
</div>
</div>
<p class="title">演示提交表单:</p>
<form style="background: #e1e1e1; width:200px; padding:20px; border-radius: 5px" @submit.stop.prevent="onSubmit">
<input type="text" v-model="passenger.chineseName" placeholder="请输入旅客姓名" autocomplete="off"/>
<input type="password" v-model="passenger.idNo" placeholder="请输入身份证" autocomplete="off"/>
<input type="text" v-model="passenger.phoneNumber" placeholder="请输入手机号" autocomplete="off"/>
<button type="submit">提交</button>
</form>
<p class="title">if else</p>
<input v-model="score" placeholder="请输入分数查看" />
<span v-if="score<60">不及格</span>
<span v-else-if="score>=60 && score<=70">一般</span>
<span v-else-if="score>70 && score<=80">良好</span>
<span v-else-if="score>80 && score <=90">优秀</span>
<span v-else-if="score>90">非常优秀</span>
<p class="title">event once, 按钮只能点一次</p>
<button @click.once="onceTest">once test</button>
</div>
<script type="text/javascript">
let vue = new Vue({
el: '#app',
data: {
message: '<div style="color:red">Hello</div>',
//定义对象
passenger:{
chineseName:'',
idNo:'',
phoneNumber:''
},
score:'',
passengers:[
{chineseName:'李玲玲',englishName:'lilingling', age:'20',sex:1},
{chineseName:'赵建国',englishName:'lijianguo',age:'45',sex:2},
{chineseName:'张明',englishName:'zhangming',age:'37',sex:1},
{chineseName:'丁莉莉',englishName:'dinglili',age:'18',sex:2}
]
},
methods: {
changeVal: function () {
this.message = '改了值';
},
add: function (event) {
alert(event.target);
},
add2: function (p1) {
alert(p1);
},
add3: function (p1,event) {
alert(event.target.nodeName);
//if(event) event.preventDefault();
},
parentMethod: function () {
alert("parentMethod");
},
subMethod: function () {
alert("subMethod, 事件不会向父级传播");
},
onSubmit: function (e) {
//var formData = new FormData(e.target);
alert(JSON.stringify(this.passenger));
},
onceTest: function () {
alert('只能点一次哦');
},
remove: function (index) {
this.passengers.splice(index,1);
},
submitTable: function () {
alert(JSON.stringify(this.passengers));
},
addTableRow: function () {
this.passengers.push({chineseName:'',englishName:'', age:'',sex:''})
}
}
});
//vue.changeVal();
</script>
</body>
</html>
12-12
01-06
2260
2260
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
