参考网址https://www.cnblogs.com/rik28/p/6024425.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="vue.js"></script>
<link href="demo.css" rel="stylesheet" />
</head>
<body>
<div id="app">
{{ message }}
<div> <input type="text" v-model="message" /></div>
<span v-if="YES">yes!1</span><br />
<span v-if="NO">no!1</span><br />
<span v-if="Age>=10">Age:{{Age}}</span><br />
<span v-if="Name.indexOf('jack')>=0">Name:{{Name}}</span><br />
<span v-show="Name.indexOf('jack')>=0">Name:{{Name}}</span><br />
<div><input type="text" name="name" v-model="Age" value="" /></div>
<span><input type="text" name="name" v-model="Name" value="" /> </span>
</div>
<h1>-----------------------------------------------------</h1><br />
<div id="app2">
<span>{{Sex}}</span><br />
<span v-if="Age>=20">{{Sex}}</span>
<span v-else>{{Age}} </span>
<input type="text" v-model="Age" name="name" value="" />
</div>
<h1>-----------------------------------------------------</h1><br />
<div id="app3">
<table>
<thead>
<tr>
<td>名字</td>
<td>年龄</td>
<td>电话</td>
</tr>
</thead>
<tbody>
<tr v-for="item in peopers">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.phone}}</td>
</tr>
</tbody>
</table>
</div>
<h1>-----------------------------------------------------</h1><br />
<div id="app4">
<ul class="pagination">
<li v-for="n in totalPage">
<a href="#" v-bind:class="CurrentPage===n?'active':'' ">{{n}}</a>
</li>
</ul>
</div>
<h1>-----------------------------------------------------</h1><br />
<div id="app5">
<button value="测试5-1" @click="getstr('测试1')">测试5-1</button>
<button value="测试5-2" @click="getstr2()">测试5-2</button>
</div>
</body>
</html>
<script>
// 这是我们的Model
var exampleData = {
message: 'Hello World!',
YES: true,
NO: false,
Age: 24,
Name: 'jack'
}
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
el: '#app',
data: exampleData
})
//测试2
var model2 = {
Sex: 'Male',
Age: 12
}
new Vue({
el: '#app2',
data: model2
})
//测试3
var model3 = {
peopers: [
{ name: 'l', age: 18, phone: '135' },
{ name: 'z', age: 18, phone: '135' },
{ name: 'j', age: 18, phone: '135' }
]
}
new Vue({
el: '#app3',
data: model3
})
//测试4
var model4 = {
CurrentPage: 1,
totalPage: 10
}
var vm = new Vue({
el: '#app4',
data: model4
})
//测试5
var vm5 = new Vue({
el: '#app5',
data: {
strsss:'测试2'
},
methods:{
getstr: function (trt) {
alert(trt)
},
getstr2: function () {
alert(this.strsss)
}
}
})
</script>