数据绑定与指令

2018-08-23 本文已影响0人大写的空气

<span>Text: {{text}}</span> //当text的值发生改变时，文本中的值联动也发生变化。

如果只需渲染一次数据，可以通过<span>Text: {{*text}}</span>或者<span v-once>这个将不会改变：{{text}}</span>

如果值是HTML片段，可以使用三个大括号绑定

logo:'<span>daa</span>

或

<p>{{rawHtml}}</p> <p>using v-html :<span v-html="rawHtml"></span></p>

v-if: 生成或者移除一个元素

<template v-if="ok"> //v-if="variable==xx"

<h1>Title</h1>

<p>Paragraph 1</p>

</template>

v-show:显示或者隐藏HTML元素，不支持<template>语法

v-if有更高的切换消耗，v-show有更高的初始渲染消耗,需要频繁切换用v-show

v-model：表单控件元素上创建双向数据绑定。自动选取正确的方法更新元素，在v-model指令后面还可以添加多个参数（number、lazy、debounce）

如果将用户输入转换为NUmber类型，如果原值转换结果为NaN，则返回原值

加上lazy，将数据改到change事件中发生

debounce设置最小的延时，<input v-model="msg" debounce="5000"><br/>{{msg}}内容在5000ms后才改变

v-for:

可以用$index来获取索引, 如果遍历为字典，每个对象都有一个特殊属性$key

如：<li v-for= "item in items" class="item-{{$index}}"> //$index = 0、1、2...

从目标数组中找到并删除元素：demo.items.$remove(item)

字典相关方法：$add(key, value) $set(key, value) $delete(key)

同时还可以和内置过滤器或排序数据一起使用

'<li v-for = "user in users | filterBy searchText in 'name'">{{user.name}}</li>' //根据input输入框输入的searchText，过滤users中的name

'<li v-for="user in users | orderBy field reverse">{{user.name}}</li>' //给数组根据field变量代表的tag字段根据reverse选择是正序还是反序(-1)

v-text

更新元素的textcontent

v-bind

将一个或多个attribute，或者一个组件prop动态绑定到表达式。v-bind可以简写

v-bind:href = :href v-on:click = @click