内容简介：Vue 对象的改变会直接影响到 HTML 的标签的变化，而且标签的变化也会反过来影响 Vue 对象的属性的变化相应按键按下时触发
Vue 对象的改变会直接影响到 HTML 的标签的变化，而且标签的变化也会反过来影响 Vue 对象的属性的变化
一、数据渲染
<div>{message} </div><!--数据绑定-->
<div v-html="htmlMess"></div> <!--html绑定-->
<div v-text="message"></div> <!--数据绑定-->
二、属性绑定
<h1 v-bind:title="message">aaa</h1> <!--属性绑定--> <a v-bind:href="url">百度</a> <!--属性绑定--> <a :href="url">百度</a> <!--简写-->
三、类名绑定
<!--类绑定，当isActive为true时类名生效--> <div v-bind:class="active : isActive"></div> <!--多类名绑定，用逗号隔开--> <div v-bind:class="active:isActive,red:isRed"></div> <!--对象类名绑定--> <div v-bind:class="classObj"></div> <!--类名数组绑定--> <div v-bind:class="[active,red]"></div> <!--三元运算符类名绑定--> <div v-bind:class="isActive ? active : red"></div>
四、样式绑定
<!--内联样式绑定-->
<div v-bind:style="{width:width,height:height}"></div>
<!--内联样式对象绑定-->
<div v-bind:sytle="styleObj"></div>
<!--内联样式对象数组绑定-->
<div v-bind:style="[styleObj1,styleObj2]"></div>
五、条件绑定
<!--条件为真时显示，css中直接有无此元素-->
<p v-if="seen">hahah</p>
<!--效果同if，css中为display：none-->
<p v-show="seen">hah</p>
<!--循环绑定-->
<p v-for="list in lists">{{alist.text}}</p>
<!--绑定lists数组-->
<p v-for="value in lists">{{value}}</p>
<!--值循环输出-->
<p v-for="(key value) in lists">{{key}}:{{value}}</p>
<!--键值对输出-->
<p v-for="(index key value) in lists">{{index}}:{{key}}:{{value}} </p>
<!--索引加键值对输出-->
<p v-for="n in 10">{{n}}</p>
六、事件绑定
<!--事件对应fun1方法--> <a v-on:click="fun1">点击</a> <!--事件绑定简写--> <a @click="fun1">点击</a> <!--事件修饰符：--> <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div v-on:click.self="doThat">...</div> <!-- click 事件只能点击一次，2.1.4版本新增 --> <a v-on:click.once="doThis"></a>
七、按键绑定
相应按键按下时触发
<input v-on:keyup.enter="submit"> <input @keyup.enter="submit">
全部的按键别名：
.enter .tab .delete .esc .space .up .down .left .right .ctrl .alt .shift .meta
八、双向绑定
<p>{message}</p>
<!--input输入值将传入Vue中的message-->
<input type="text" v-model="message"/>
<select v-model="message" id="aa">
<option>百度</option>
<option>腾讯</option>
<option>阿里</option>
</select>
绑定修饰符
-
v-model.lazy将input同步改为change同步 - -
v-model.mumber将能转化为数字的字符串转化为数字 -
v-model.trim过滤空格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
区块链革命
[加]唐塔普斯科特（Don Tapscott）、[加]亚力克斯·塔普斯科特(Alex Tapscott) / 中信出版集团股份有限公司 / 2016-9 / 69
（1）国际大腕“数字经济之父”继畅销书《维基经济学》之后再出力作！ （2）一本真正全景式描述区块链理论及应用的巨著！ （3）苹果共同创始人史蒂夫·沃兹尼亚克、世界经济论坛创始人和论坛主席克劳斯·施瓦布、网景及硅谷安德森·霍洛维茨风险投资公司创始人马克·安德森、麦肯锡董事长兼全球总裁鲍达民、 百事公司首席执行官卢英德、丹·舒尔曼 Paypal公司首席执行官等全球政治界、学术界和商界精英联......一起来看看 《区块链革命》 这本书的介绍吧!
