JavaScript: 练习 Vue.js
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<span>{{message}}</span><br>
<span v-bind:title="title">鼠标悬停查看</span><br>
<a v-bind:href="url">链接</a><br>
<p v-if="istrue1">v-if is True</p>
<p v-else-if="istrue2">v-else-if is True</p>
<p v-else>v-if and v-else-if are not True</p>
<p v-show="isshow">v-show is True</p>
<button v-on:click="counter += 1">加1 {{counter}} clicked</button>
<br><br>
<button v-on:click="add">Add 1</button>
<p>The button above has been clicked {{counter2}} times!</p>
<button v-on:click="add2(n)">加 {{n}} 结果：{{counter3}}</button>
<ol>
<li v-for="(item,index) in lists">
{{item.text}}--{{index}}
</li>
</ol>
<br>
<ol>
<li v-for="value in object">
{{value}}
</li>
</ol>
<br>
<ol>
<li v-for="item in listObjects">
{{item.name}}--{{item.age}}--{{item.gender}}
</li>
</ol>
<br>
<table>
<tr>
<td>用户名：</td>
<td><input type="text" v-model="username"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" v-model="password1"></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" v-model="password2"></td>
</tr>
<tr>
<td>
性别：
</td>
<td>
男<input type="radio" name="gender" value="male" v-model="gender">
女<input type="radio" name="gender" value="female" v-model="gender">
</td>
</tr>
<tr>
<td>
爱好：
</td>
<td>
足球<input type="checkbox" name="hobby" value="Soccer" v-model="hobby">
篮球<input type="checkbox" name="hobby" value="Basketball" v-model="hobby">
排球<input type="checkbox" name="hobby" value="Volleyball" v-model="hobby">
</td>
</tr>
<tr>
<td>
城市：
</td>
<td>
<select name="city" v-model="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
</td>
</tr>
<tr>
<td>
简介：
</td>
<td>
<textarea name="desc" v-model="desc"></textarea>
</td>
</tr>
</table>
<button v-on:click="register">注册</button>
<ol>
<li v-for="(value,key) in info">
{{key}}:{{value}}
</li>
</ol>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: "hello world!",
title: '页面加载于 ' + new Date().toLocaleString(),
istrue1: false,
istrue2: false,
url: 'https://www.baidu.com',
isshow: true,
counter: 0,
counter2: 0,
n: 2,
counter3: 0,
username: '',
password1: '',
password2: '',
gender: '',
hobby: [],
city: '',
desc: '',
info: '',
lists: [
{text: 'item1'},
{text: 'item2'},
{text: 'item3'},
],
listObjects: [
{
name: 'Name1',
age: 'Age1',
gender: 'Gender1',
},
{
name: 'Name2',
age: 'Age2',
gender: 'Gender2',
},
{
name: 'Name3',
age: 'Age3',
gender: 'Gender3',
},
],
object: {
title: 'Title',
author: 'Author',
date: 'Date',
}
},
methods: {
add: function () {
this.counter2 += 1
},
add2: function (num) {
this.counter3 += num
alert(this.counter3)
},
register: function () {
this.info = {
username: this.username,
password1: this.password1,
password2: this.password2,
gender: this.gender,
hobby: this.hobby,
city: this.city,
desc: this.desc,
}
}
}
})
</script>
</html>
##########################################################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="newItem">
<button v-on:click="addNewItem">添加</button>
<br>
<ul>
<li v-for="(item,index) in items">{{item}} <a href="javascript:;" v-on:click="deleteItem(index)">删除</a></li>
</ul>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
items: [
'item1',
'item2',
'item3',
],
newItem: '',
},
methods: {
addNewItem: function () {
this.items.push(this.newItem);
this.newItem = '';
},
deleteItem: function (index) {
this.items.splice(index,1)
}
}
})
</script>
</html>
