vue中的数据绑定(二)

栏目: 编程语言 · 发布时间: 5年前

内容简介:Vue 对象的改变会直接影响到 HTML 的标签的变化,而且标签的变化也会反过来影响 Vue 对象的属性的变化相应按键按下时触发

Vue 对象的改变会直接影响到 HTML 的标签的变化,而且标签的变化也会反过来影响 Vue 对象的属性的变化

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.lazyinput 同步改为 change 同步 -
  • v-model.mumber 将能转化为数字的字符串转化为数字
  • v-model.trim 过滤空格

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

搜索引擎

搜索引擎

(美)克罗夫特 / 机械工业出版社 / 2009-10 / 45.00元

《搜索引擎:信息检索实践(英文版)》介绍了信息检索(1R)中的关键问题。以及这些问题如何影响搜索引擎的设计与实现,并且用数学模型强化了重要的概念。对于网络搜索引擎这一重要的话题,书中主要涵盖了在网络上广泛使用的搜索技术。 《搜索引擎:信息检索实践(英文版)》适用于高等院校计算机科学或计算机工程专业的本科生、研究生,对于专业人士而言,《搜索引擎:信息检索实践(英文版)》也不失为一本理想的入门教......一起来看看 《搜索引擎》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具