Vue.js小试
Posted 我的技术空间
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js小试相关的知识，希望对你有一定的参考价值。
参考网址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>
以上是关于Vue.js小试的主要内容，如果未能解决你的问题，请参考以下文章