vue2.0中常见的指令:
1.v-model 双向数据绑定
实例:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>{{str}}</p>
<input type="text" v-model="str" />
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
str:"hello world"
}
})
</script>
</html>
其中:改变input中输入的值,p标签中的值也会相应改变,实现了数据的双向绑定
2.v-for 数据的遍历
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in str">{{item}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
str:["aa","bb","cc"]
}
})
</script>
</html>
注意:如果要拿到键名,在循环中可以用v-for="(item,index) in str",index就是键名(序号).
3.v-if与v-else与v-show
其中v-if与v-else是相辅相成的,判断布尔值,如果为真,页面则会加载数据,如果布尔值为假,则不会加载数据,v-show是会加载数据,但是控制的显示和隐藏,与display的作用一样,文档树中会有这个元素,但是隐藏了
4.v-bind 绑定的是属性
它可以绑定class,href等等
它的两种简单的用法:
<a v-bind:href="url">链接</a> 完整用法
<a :href="url">链接</a> 缩写用法
5.v-text 只读取文本,不读取标签
6.v-html 可以读取标签
7.v-class 类名
8v-once 只加载一次数据
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p v-once>{{str}}</p>
<input type="text" v-model="{{str}}"/>
<p>{{str}}</p>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
str:"hello world"
}
})
</script>
</html>
其中:不管input中输入的值怎么改变,一个p标签的值都不会发生改变
9.v-cloak 防止闪烁
304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
