vue指令總結
阿新 • • 發佈：2018-06-23
pan button name lac box spa 的區別 aaaaa 對象
new Vue({
el: "#box", // element（元素） 當前作用域
data：{
msg:"hello!"
},
methods:{
changecontent(){
this.msg=‘hi!‘
}
}
});
一、v-model雙向綁定數據
<input type="text" v-model="msg"/> {{msg}} // "hello!" <!--取數據-->二、v-for循環
1 <div id="box">
2 <ul>
3 <!--ng-repeat-->
4 <li v-for="item in arr">
5 <span>{{item.name}}</span>
6 <span>{{item.age}}</span>
7 </li>
8 </ul>
9 </div>
10 <script type="text/javascript">
11 new Vue({
12 el:‘#box‘,
13 data(){
14 return{
15 // arr:[‘module‘,‘views‘,‘controlle‘,‘aaaaa‘]
16 arr:[
17 {"name":"xiaohong1","age":12},
18 {"name":"xiaohong2","age":12},
19 {"name":"xiaohong3","age":12},
20 {"name":"xiaohong4","age":12}
21 ]
22 }
23 }
24 })
25 </script>
三、v-show 顯示與隱藏
傳遞的值為布爾值 true false 默認為false
<div id="box">
<div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>
</body>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
四、v-if顯示與隱藏
與v-show的區別：v-if的隱藏相當於給代碼加註釋，也就是刪除了DOM元素；v-show相當於在操作display屬性，隱藏後DOM元素仍然存在，占用內存。
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
五、v-else與v-else-if(必須與v-if一起使用)
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
<div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
v-else-if
<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
<div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>
<div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>
六、v-bind（簡寫:）
v-bind:class 三種綁定方法 1、對象型 ‘{red:isred}‘ 2、三目型 ‘isred?"red":"blue"‘ 3、數組型 ‘[{red:"isred"},{blue:"isblue"}]‘
<div id="box">
<input type="text" v-bind:value="msg">
<a :href="link">點擊</a>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
msg: "12222",
link:"1、v-model.html"
}
}
})
</script>
七、v-on 事件
<div id="box">
<!-- v-on -->
<button v-on:click="say">按鈕</button>
<!--<button @click="say">按鈕</button>-->
</div>
<script>
new Vue({
el: "#box",
data(){
return {}
},
methods: {
say() {
alert(111);
}
}
})
</script>
八、v-text讀取文本
不能讀取html標簽
1 <div id="box">
2 <div v-text="msg"></div>
3 </div>
4
5 <script>
6 new Vue({
7 el: "#box",
8 data(){
9 return {
10 msg:"11111"
11 }
12 },
13 methods: {
14 say() {
15 alert(111);
16 }
17 }
18 })
19 </script>
九、v-html
讀取html標簽
<div id="box">
<div v-html="msg"></div>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
msg:"<h1>121212</h1>"
}
},
methods: {
say() {
}
}
})
</script>
十、v-class （類名）與v-style
1 <style>
2 .red {
3
4 background: red;
5 }
6
7 .blue {
8 width: 100px;
9 height: 100px;
10 background: blue;
11 }
12
13 </style>
14
15
16 <div id="box">
17 <div style="width: 100px;height: 100px;" v-bind:class=‘{red:isred}‘></div>
18 <!--<div style="width: 100px;height: 100px;" v-bind:class=‘isred?"red":"blue"‘></div>--> <!--三元運算符方式-->
19 <!--<div style="width: 100px;height: 100px;" v-bind:class=‘[{red:"isred"}]‘></div>-->
20
21 </div>
22
23
24 <script>
25 new Vue({
26 el: "#box",
27 data(){
28 return {
29 isred:false
30 }
31 }
32 })
33 </script>
十一、v-once
就是 加載一次 如果用到事件中就是事件只執行一次（@click.once="show"）
<div id="box">
<div v-once>{{msg}}</div>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data(){
return{
msg:"qwdqwdqwd"
}
}
})
</script>
十二、v-cloak防閃爍
<div id="box">
<div v-cloak="">歡迎--{{msg}}</div>
</div>
<script>
new Vue({
el:"#box",
data(){
return{
msg:"111111"
}
}
})
</script>
十三、v-pre
把標簽內部的元素原位輸出
<div id="box">
<div v-pre>歡迎--{{msg}}</div>
</div>
<script>
new Vue({
el:"#box",
data(){
return{
msg:"111111"
}
}
})
</script>
vue指令總結