1. v-bind绑定class
<style>
.text{
color: red;
}
.active{
color: blue;
}
</style>
<div id="app">
<h2 class="text" :class="{active:isactive}">{{red}}</h2>
<button @click="change">点击改变</button>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
red:"颜色",
isactive:true,
},
methods:{
change:function(){
this.isactive = !this.isactive;
}
}
})
2.v-bind 和 v-for结合案例（点击哪一个li，就改变颜色）
<style>
.active{
color: blueviolet;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in movies" @click="change(index)" v-bind:class="{active:index==num}" >{{index}}--{{item}}</li>
</ul>
</div>
<script>
const app =new Vue({
el:"#app",
data:{
movies:['潘婷','dddd','sao'],
num:0,
},
methods:{
change:function(index){
this.num = index;
}
}
})
3.v-bind 绑定样式
<div id="app">
<ul>
<h1 :style="{'font-size':'15px','color':'red'}">{{message}}</h1>
</ul>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:'你好'
},
})
</script>
4.v-on 修饰符 阻止冒泡
<div id="app">
<div @click="divclick">
<button @click.stop="btnclick"></button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
methods:{
divclick(){
console.log("divclick");
},
btnclick(){
console.log("btnclick");
}
}
})
5.v-if和v-else （true的时候显示v-if，false显示v-else）
<div id="app">
<h2 v-if="isShow">{{message}}</h2>
<h2 v-else="isShow">{{messagetwo}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好",
messagetwo:"我好",
isShow:false,
}
})
6. v-show和v-if （v-show控制的是节点的display属性为none，v-if是将节点删除，如果节点需要频繁显示隐藏，用v-show）
<div id="app">
<p v-show = "isShow">黑马程序员</p>
<p v-if = "isShow">黑马程序员</p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:true,
}
})
7.v-for （给对应元素或组件添加 :key） 想再AB后插入F 有了key，可以直接在AB后加， 否则系统会让虚拟Dom中的li3改成 F，后面逐步修改，相比加了Key，性能消耗大
key的作用 高效的更新虚拟Dom
<ul id="app">
<h2 v-for = "item in food" :key="item">{{item}}</h2> // :key="值" 与 {{值}} 得是对应的
</ul>
<script>
const app = new Vue({
el:"#app",
data:{
food:['apple','banana','orange']
}
})
</script>
4055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
