vue相关指令

xiaoxiao2021-02-28  5

一、v-bind绑定某个属性,可以省略, 1.1、例如:v-bind:class == :class 1.2、v-bind:class的作用 1.2.1、我们可以向v-bind:class传入一个对象,从而动态地切换class样式。 v-bind:class="{active:isActive}", 上述语法意味着, active  这个 class 的存在与否,取决于  isActive  这个 data 属性的  truthy  值。 如: 效果图: 1.2.2、向v-bind:class直接绑定一个类名时,data数据中应该包含有此类名 模板中的代码 export default中的代码 样式代码 效果,链接文字包含有aaa,bbb的样式 @keyup.ctrl 的语法意思为:只能按下ctrl键才调用showHide方法 1.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>
转载请注明原文地址: https://www.6miu.com/read-1600191.html

最新回复(0)