##使用class样式
一共四种方式在注释中有解释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.red{
color: red;
}
.thin{
font-weight: 200;
}
.italic{
font-style: italic;
}
.active{
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<!-- 第一种使用方式,直接传递一个数组,这里的class需要使用 v-bind 做数据绑定 -->
<!-- <h1 :class="['thin','italic']">这是一个很大很大的H1</h1> --> <!-- 在数组中使用三元表达式 -->
<!-- <h1 :class="['thin', 'italic',flag?'avtive':'']">这是一个很大很大的H1</h1> --> <!-- 在数组中使用 对象 替代三元表达式,提高代码可读性 -->
<!-- <h1 :class="['thin', 'italic',{'avtive':flag}]">这是一个很大很大的H1</h1> --> <!-- 在为 class 使用 v-bind 绑定对象时,对象的属性是类名,由于 对象的属性可带引号,也可不带,所以这里没写引号,属性的值 是一个标识符 -->
<h1 :class="classObj">这是一个很大很大的H1</h1>
</div> <script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
flag:true,
classObj:{
red:true,
thin:true,
italic:false,
active:false
}
},
methods:{ }
})
</script>
</body>
</html>
##使用内联样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 对象就是无序键值对集合 -->
<h1 :style="styleObj1">这是一个H1</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
styleObj1:{
color:'red',
'font-weight':200
}
},
methods:{ }
})
</script>
</body>
</html>
##v-for循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<p v-for="user in list">{{ user.id }}---------{{ user.name }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
list:[
{id:1,name:'zs1'},
{id:2,name:'zs2'},
{id:3,name:'zs3'},
{id:4,name:'zs4'}
]
},
methods:{ }
})
</script>
</body>
</html>
数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 注意:在遍历对象身上的键值对的时候,除了有val key ,在第三个位置还有索引 -->
<p v-for="(val,key) in user">{{ val }}------{{ key }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
user:{
id: 1,
name: 'Tony Stark',
gender:'男'
}
},
methods:{ }
})
</script>
</body>
</html>
对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- in后面我们放过 普通数组,对象数组,对象,还可以放数字 -->
<!-- 注意:如果使用v-for迭代数字,前面的count值从1开始 -->
<p v-for="count in 10">这是第 {{ count }} 次循环</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{ },
methods:{ }
})
</script>
</body>
</html>
迭代数字
2.2.0+的版本中,在组件里使用v-for时,key是必须的.
当Vue.js用v-for正在更新已渲染过的元素列表时,它默认用"就地复用"策略,如果数据的顺序被改变,Vue将不是移动DOM元素来匹配数据的顺序,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过得每个元素
为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一的key属性(string/number).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<label>Id:
<input type="text" v-model="id"/>
</label>
<label>Name:
<input type="text" v-model="name"/>
</label>
<label>
<input type="button" value="添加" @click="add"/>
</label>
</div> <!-- 注意:v-for循环的时候key属性只能使用number或string -->
<!-- 注意:key在使用的时候必须使用 v-bind 属性绑定的形式指定key的值 -->
<!-- 在组件中使用v-for循环时或在一些特殊情况中,如果 v-for 有问题,必须 在使用v-for 的同时指定唯一的字符串/数字类型 :key值 -->
<p v-for="item in list" :key="item">
<input type="checkbox"/>{{ item.id }}---------{{ item.name }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
list:[
{ id: 1,name:'李斯'},
{ id: 2,name:'嬴政'},
{ id: 3,name:'赵高'},
{ id: 4,name:'韩非'},
{ id: 5,name:'荀子'}
]
},
methods:{
add(){
this.list.unshift({id:this.id, name:this.name})
}
}
})
</script>
</body>
</html>
实例说明:
当第27行代码中无 :key="item"时,运行后界面如下:
假如先勾选第五个,然后添加id为6,name为项目的元素,点添加按钮后界面如下:
会发现在插入新元素后,勾选的仍是排序为第五个的元素,但是却不是我们希望勾选的id为5的元素.
现在我们在第27行代码中加入key,再试试添加新元素的效果.结果如下:
这就是为什么在使用v-for的时候后面必须加上key
##v-if和v-show的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <input type="button" value="toggle" @click="toggle"/> -->
<input type="button" value="toggle" @click="flag=!flag"/>
<!-- v-if 的特点是每次都会重新删除或创建元素,有较高的切换性能消耗-->
<!-- v-show 的特点是不会重新进行dom的删除和创建操作,只是切换了元素的 display:none 样式 ,有较高的初始渲染消耗--> <!-- 如果元素涉及到频繁的切换,最好不要使用 v-if ,推荐使用v-show-->
<!-- 如果元素可能永远也不会被显示给用户看到,则推荐使用 v-if -->
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
flag : true
},
methods:{
// toggle(){
// this.flag = !this.flag
// }
}
})
</script>
</body>
</html>