vue常用指令
v-bind:
v-on:
v-text: 跟插值表达式功能类似，可以向指定的元素中加入数据
v-html: 可以将带有标签的字符串，渲染到指定的元素中
v-show: 指令给一个bool类型，如果bool类型为true,显示，否则false就是不显示
v-if: 指令给一个bool类型，如果bool类型为true,显示，否则false就是不显示
v-if 和 v-show的区别：
条件为真是，都可以显示dom元素，当条件为假时，v-if是删除dom节点，v-show是隐藏dom节点
如果在页面频繁使用时，使用v-show，如果页面使用只有初始化一次是否显示时，使用v-if
示例：
<template v-show="isShow">
</template>
他是透明标签，不会渲染任何的标签，然后只有v-if可以控制他的添加或删除，v-show不好使
v-for:
循环数组： v-for="(item,index) in arr" item表示的是数组中的每一项，index表示的是每一项的索引
循环对象： v-for="(value,key) in obj" value表示对象中的属性值，key表示对象中的属性
循环数字： v-for="(n,i) in num" n表示从1到指定的数字，i表示从0到多
循环字符串：v-for="(s,i) in str" s表示循环字符串中的每一个字符，i表示字符的索引
实现单选效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
<style>
/* 选种样式 */
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 如果p元素的下表和active相同就添加选种样式 -->
<p @click="checked(k)" :class="{'active':k==active}" v-for="(i,k) in 5">{{i}}</p>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
active:0 //被选中的元素的下标
},
methods:{
checked(k){ //谁点击active就等于谁的下标
this.active=k
}
}
})
</script>
</html>
实现多选效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
<style>
/* 选种样式 */
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 如果该条数据的ischecked属性为true就添加选中样式 -->
<p @click="checked(k)" :class="{'active':i.ischecked}" v-for="(i,k) in arr">{{i.title}}</p>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
// 渲染到页面的数据
arr:[{title:"1",ischecked:false},{title:"1",ischecked:false},{title:"1",ischecked:false},{title:"1",ischecked:false},]
},
methods:{
checked(k){ //哪个元素点击该元素对应数据.ischecked就为true
this.arr[k].ischecked=true
}
}
})
</script>
</html>
版权声明：本文为weixin_47212088原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。