VUE 的常用指令 动态添加样式 单选效果 多选效果 样式实现 实现style和class的样式切换

VUE 的常见指令

查漏补缺

使用形式

绑定到dom的属性上即可 为了区别自定义属性，
vue提供的指令都携带 v-

指令

v-html
非转义输出 可以解析xml类型数据（即可以解析标签）
v-etxt
（不可以解析标签）
v-if
判断是否渲染此元素（条件渲染）
v-show
判断是否显示此元素（条件展示）
v-for
可以看做是标签中的for循环
v-bind
动态绑定 （v-bind可以写为“：”）
v-model
双向数据绑定
v-on
绑定事件（拥有事件修饰符和按键修饰符 可简写为@）
{{ a }}
模板语法（所有的类型都是支持的但是console.log和alert这类输出语法是不支持的）
v-cloak
用于解决差值表达式闪烁的问题

动态添加样式 单选效果 多选效果 样式实现 实现style和class的样式切换

动态添加样式

1. 动态绑定一个标签

<标签 v-bind:style="{样式的属性名:变量}">

2. 绑定 class

<标签 v-bind:class="{类名:变量}">

多选
css样式如下

<style type="text/css">
body{margin:0;}
.box{ margin:150px 150px;}
ul{
	padding:0; 
	list-style:none;
}
li{
	width:50px; height:30px; display:inline-block;
	text-align:center; line-height:30px;
	cursor:pointer;margin-left:5px;
}
li:before{ 
	display:inline-block; width:10px; height:10px; 
	line-height:10px; content:""; border:1px #000 solid; 
	margin-right:2px; transition:all 0.3s linear;
}	
li.checked:before{ 
	background-color:#0CF; 
	border:1px #fff solid;
}
li.checked{color:#0CF;}
</style>

DOM文档中结构如下：

<ul class="box">
    <li v-for="c,index of cities"
    :class="{checked:c.bOn}"
    @click="checkbox(index)">{{c.city}}</li>
</ul>

JavaScript样式如下：

<script src="vue.js"></script>
<script>
var app = new Vue({
	el : ".box",
	data : {
		cities : [{city:"北京",bOn:false},
		{city:"上海",bOn:false},
		{city:"重庆",bOn:false},
		{city:"广州",bOn:false},
		{city:"西安",bOn:false}]
	},
	methods : {
		checkbox(i){
			this.cities[i].bOn = !this.cities[i].bOn;
		}
	}
})

即可做到多选样式
单选
CSS样式如下：

<style type="text/css">
body{margin:0;}
ul{
	padding:0; list-style:none; 
	margin:150px 150px;
}
li{
	width:80px; height:50px; 
	display:inline-block;
	border-radius:8px; border:1px #000 solid;
	text-align:center; line-height:50px;
	cursor:pointer; 
	transition:all 0.3s linear;
	margin-left:5px;
}
li:hover{
	background-color:#0CF; color:#fff; 
	border:1px #fff solid;
}	
li.checked{
	background-color:#0CF; color:#fff; 
	border:1px #fff solid;
}
</style>

DOM文档中结构如下：

<ul class="box">
	<li v-for="c,index of cities" :class="{checked:index==n}" @click="changeList(index)">{{c}}</li>
</ul>

JavaScript样式如下：

<script src="vue.js"></script>
<script>
var app = new Vue({
	el : ".box",
	data : {
		cities : ["上海","北京","广州","重庆","西安"],
		n : 0
	},
	methods :{
		changeList(index){
			this.n = index;//this指向app
		}
	}
})
</script>

即为单选