vue相关指令

 
  一、v-bind绑定某个属性,可以省略， 
 

 
1、例如：v-bind:class == ：class 
 

 
2、v-bind:class的作用 
 

 
2.1、我们可以向v-bind:class传入一个对象，从而动态地切换class样式。 
 

 
  v-bind:class="{active:isActive}", 
 

 
  上述语法意味着， 
  active 
   这个 class 的存在与否，取决于  
  isActive 
   这个 data 属性的  
  truthy 
   值。 
 

 
  如： 
 

   效果图： 
 

 
2.2、向v-bind:class直接绑定一个类名时，data数据中应该包含有此类名 
 

 
  模板中的代码 
 

 
  export default中的代码 
 

 
  样式代码 
 

 
  效果，链接文字包含有aaa,bbb的样式 
 

 
  @keyup.ctrl 的语法意思为：只能按下ctrl键才调用showHide方法 
 

 
2.3、v-bind:class可以绑定数组，数组中又可以嵌套json对象 
 

 
  样式： 
 

 
  效果图： 
 

 
  分析： li标签会有item变量类名的样式，当点击时，同时拥有onBor类名的样式。 item会解析为变量的类名，onBor解析为类名。 
 

 
  二、v-model指令 
 

 
   v-model指令通常用于双向绑定数据 
 

 
  复选框的双向绑定，data中定义一个数组来接收 
 

 
  <template> 
 

   <div> 
 

   <!--lazy 延迟更新数据，失去焦点时显示数据--> 
 

   <!--number 规定输入类型，当一开始不是数字时，输出原来的，否则将数据转化为数字类型--> 
 

   <!--trim 去空格--> 
 

   <!--input 数据双向绑定--> 
 

   <input type="text" value="" v-model.lazy="texts"> 
 

   <input type="text" value="" v-model.number="texts"> 
 

   <input type="text" value="" v-model.trim="texts"> 
 

   {{ typeof texts}} 
 

   {{ texts}} 
 

   <br/> 
 

   <!--复选框--> 
 

   <input type="checkbox" value="篮球" v-model="checkboxes">篮球 
 

   <input type="checkbox" value="羽毛球" v-model="checkboxes">羽毛球 
 

   <input type="checkbox" value="兵乓球" v-model="checkboxes">兵乓球 
 

   {{checkboxes}} 
 

   <br/> 
 

   <!--单选框--> 
 

   <input type="radio" value="男" v-model="radioes">男 
 

   <input type="radio" value="女" v-model="radioes">女 
 

   {{radioes}} 
 

   <br/> 
 

   <!--下拉框--> 
 

   <!--<select v-model="selects"> 
 

   <option value="1">1</option> 
 

   <option value="2">2</option> 
 

   <option value="3">3</option> 
 

   </select> 
 

   {{selects}} 
 

   </div> 
 

 
  </template> 
 

 
  <script> 
 

   export default{ 
 

   name:"lesson03", 
 

   data(){ 
 

   return { 
 

   texts:"", 
 

   checkboxes:[], 
 

   radioes:[], 
 

   selects:"", 
 

   msg:"子级向父级传递数据" 
 

}

},

 
  </script> 
 

猜你喜欢