<style>.classA { color: red; }.classB {background: blue; }.classC { font-size: 20px; }</style>
<div id="demo">
<h2>1. class 绑定: :class='xxx'</h2>
<p class="classB" :class="a">表达式是字符串: 'classA'</p>
<p :class="{classA: isA, classB: isB}">表达式是对象: {classA:isA, classB: isB}</p>
<p :class="['classA', 'classC']">表达式是数组: ['classA', 'classB']</p>
<h2>2. style 绑定</h2>
<p :style="{color, fontSize}">style="{ color: activeColor, fontSize: fontSize + 'px' }"</p>
<button @click="update">更新</button></div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">new Vue({
el: '#demo',
data: {
a: 'classA',
isA: true,
isB: false,
color: 'red',
fontSize: '20px'
},
methods: {
update() {
this.a = 'classC'this.isA = false this.isB = true this.color = 'blue'this.fontSize = '30px'
}
}
})</script>
<div id="demo">
<h2 v-if="ok">表白成功</h2>
<h2 v-else>表白失败</h2>
<h2 v-show="ok">求婚成功</h2>
<h2 v-show="!ok">求婚失败</h2>
<br>
<button @click="ok=!ok">切换</button></div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">var vm = new Vue({
el: '#demo',
data: {
ok: false
}
})</script>
<div id="demo">
<h2>测试: v-for 遍历数组</h2>
<ul>
<li v-for="(p, index) in persons" :key="index">{{index}}--{{p.name}}--{{p.age}} --
<button @click="deleteItem(index)">删除</button>--
<button @click="updateItem(index, {name:'Jok',age:15})">更新</button></li>
</ul>
<h2>测试: v-for 遍历对象</h2>
<ul>
<li v-for="(value, key) in persons[0]">{{ key }} : {{ value }}</li></ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">new Vue({
el: '#demo',
data: {
persons: [{
id: 1,
name: 'Tom',
age: 13
},
{
id: 2,
name: 'Jack',
age: 12
},
{
id: 3,
name: 'Bob',
age: 14
}]
},
methods: {
deleteItem(index) {
this.persons.splice(index, 1)
},
updateItem(index, p) {
// this.persons[index] = p // 页面不会更新
this.persons.splice(index, 1, p) } } })
</script>
<html>
<head>
<title></title>
</head>
<body>
<div id="demo">
<input type="text" name="searchName" placeholder="搜索指定用户名" v-model="searchName">
<ul>
<li v-for="(p, index) in filterPerson">{{index}}--{{p.name}}--{{p.age}}
</li>
</ul><button>年龄升序</button> <button>年龄降序</button> <button>原本顺序</button>
</div><script type="text/javascript" src="../js/vue.js">
</script><script type="text/javascript">
new Vue(
{
el: '#demo',
data: {
orderType: 0,
//0 代表不排序, 1 为升序, 2 为降序
searchName: '',
persons: [
{id: 1, name: 'Tom', age: 13},
{id: 2, name: 'Jack', age: 12},
{id: 3, name: 'Bob', age: 17},
{id: 4, name: 'Cat', age: 14},
{id: 4, name: 'Mike', age: 14},
{id: 4, name: 'Monica', age: 16} ]
},
methods:
{
setOrderType (orderType)
{
this.orderType = orderType
}
},
computed:
{
filterPerson()
{
let {orderType, searchName, persons} = this
// 过滤
persons = persons.filter(p => p.name.indexOf(searchName)!=-1)
// 排序
if(orderType!==0)
{
persons = persons.sort(
function (p1, p2)
{
if(orderType===1)
{ return p1.age-p2.age }
else { return p2.age-p1.age }
})
}
return persons } } })
</script>
</body>
</html>