关于vue 常用指令，以及动态添加样式，单选效果，多选效果样式实现，主要是style，class的样式切换

vue常用指令

v-text 解析输出变量 不解析标签
v-html 解析输出变量 解析标签
v-if 条件输出 不符合的元素就不渲染 用于初始渲染和数据的筛选
v-show 条件输出 将元素全部渲染出来 不符合的给隐藏掉 用于选项卡的切换
v-bind 给标签绑定属性 可以简写为 :属性名=“变量”
​v-on 给元素绑定事件 用法 v-on:事件名=“方法名” 可以简写为@事件名=“方法”
v-pre 跨过当前的标签不解析 用法 ：<标签 v-pre></标签>
​v-cloak 解决差值表达式闪烁的问题
v-model 实现数据的双向绑定 只能适用于表单元素
​v-for 可以循环遍历数据

动态添加样式

绑定行内样式

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

绑定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: