Tracy 小笔记 Vue - 数据展示，基本指令，绑定属性 v-bind，v-for，条件渲染，强制渲染

2023-11-19

数据展示

插值操作

data 里的数据都是怎么显示在页面上的？
Mustache 语法 (胡须，也就是双大括号) : {{变量 | 简单表达式}}

基本指令

v-once 指令的使用：<h2 v-once>{{message}}<h2>
如果需求是只显示最初的值，以后值不变，就要加这个指令。
当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过；
v-html : 当服务器给我们返回的数据带标签的时候(富文本)

 如： `url: '<a href="http://www.baidu.com" >百度一下<a>',
<h2>{{ur}}<h2>: 页面会把这一串标签当做字符转打印出来
<h2 v-html="url">{{ur}}<h2> 页面会将这个a 标签正常显示在页面上`

v-text <h2 v-text="message"><h2> == <h2>{{message}}<h2>
它的局限性比较大,就是展示文本，不够灵活，如果h2 里有其他文本，都会被覆盖
v-pre : 和标签 pre 比较相似，{{message}} 直接打印出来，而不会把它当做变量

<h2 v-pre>{{message}}<h2>

v-cloak 斗篷指令, 放置网络慢的时候卡住，页面直接渲染出来了文字 “{{message}}” 然后再变成想要显示的数据。会出现闪烁的状态.

<h2 v-cloak>你好啊 ： {{message}}<h2>

Tips: 在 vue 解析之前， h2 中有属性 v-cloak, 在 vue 解析之后， h2 的该属性会被删掉，所以我们可以通过 css 来不让它在页面加载的时候直接显示 {{message}}
[v-cloak] {display:none;}

绑定属性 v-bind

作用：动态属性绑定。前面的插值操作，主要是把数据写到我们“模板的内容”当中，但是除了内容外，我们标签里的属性有时候也需要绑定动态数据。如 a 的 href, img 的 src.
v-bind 的基本使用：

<img src="{{imgUrl}}" alt="这样是显示不了图片的,它把 {{imgUrl}} 直接当做成了普通的字符串了">
<img v-bind:src="imgUrl" alt="只有用v-bind 绑定属性，图片才可以显示">

图片的相对路径： src 会用 @ 来代替 <img :src='require("@/assets/img/tabbar/cart.png")' > <img src="~@/assets/img/tabbar/cart.png" >
任何非 require 或者 import 用绝对路径的时候 @ 前面要用 ~ 号
语法糖缩写：只写冒号即可 v-bind:src == :src
动态绑定 class (对象语法)
普通绑定: v-bind:class=“自定义的class变量” 和正常的属性绑定是一样的使用方式
对象绑定: v-bind:class="{key1: value1, key2: value2,…}" 这里写的事单个大括号，代表对象
{类名1: boolean, 类名2: boolean} 当布尔值为true 都得时候，对应的类名才会被加入到 class 中
比如说： v-bind:class="{active: ‘true’, line: ‘false’}" 最终这个标签上显示的 class=“active”
v-bind:class="{active: isActive, line: isLine}"
data: {isActive:‘true’, isLine: ‘false’}
这时候我们可以在某事件中改： vue.isActive= false;
标签里可以普通 class 和 v-bind:class 共存，最终会把两个属性合并在一起
methods 绑定
v-bind:class="{active: isActive, line: isLine}" 你如果觉得太长的话可以变成
v-bind:class=“getClass()”
methods:{getClass:function(){ return {active: this.isActive, line: this.isLine}; }}
计算属性绑定，computed 以后讲。
动态绑定 class (数组语法)：用的时候比较少
也是可以和普通class 共存
v-bind:class="[‘active’, ‘line’]" 这种是直接写死的，有单引号当做普通字符串
v-bind:class="[active, line]" 这种是取 data 里的变量值，没有单引号
也是可以用 methods
v-bind:class=“getClass()”
methods:{getClass:function(){ return [this.isActive, this.isLine]; }}
动态绑定 style (对象语法)
:style="{key: value, css 属性名: css 属性值}"
:style="{font-size: ‘50px’}"
font-size 可以换成小驼峰 fontSize, vue 支持两种语法
50px 要加一个单引号，否则 vue 会把它当成变量去解析, 这个和 v-bind:class 其实是一样的
methods 绑定
:style=“getStyle()”
data: {fontsize: 20},
methods: { getStyle(){ return {fontSize: this.fontsize + “px”};}, }
动态绑定 style (数组语法)：用的时候比较少
:style="[style1, style2]"
data: {
style1: {fontsize: ‘50px’},
style2: {backgroundColor: ‘red’},
}

v-for

遍历数组：

{{item}} :key="item"
v-for="(item, index) in movies v-bind:key="item": 使用 v-for时给对应的元素或组件添加 :key 属性，它的作用是为了更高效的更新虚拟 dom. (也就是说，当 v-for 只是展示一下而不会被增加，删除等，还是不用加 :key 属性的)
遍历对象
v-for=“value in objects”
v-for="(value, key) in objects"
v-for="(value, key, index) in objects"

通过索引修改数组中的元素，不是响应式的： this.movies[0]=‘夏洛特烦恼’
替代方式 this.letters.splice(0, 1, ‘夏洛特烦恼’) 或者 vue 自带的 set(要修改的对象, 索引值, 修改后的值): vue.set(this.movies, 0, ‘夏洛特烦恼’)

条件渲染 v-if, v-else-if, v-else

注意: 用 key 管理可复用的元素, 这个可以控制不同条件的时候，比如说用户名登入切换到邮箱登入后，文本框要不要保留原来的值。当 key 值不同的时候就可以重新保存了。

强制渲染

this. f o r c e U p d a t e ( ) ; v u e 数据更新了，页面不变。添加 t h i s . forceUpdate(); vue 数据更新了，页面不变。添加this. forceUpdate();vue数据更新了，页面不变。添加this.forceUpdate();进行强制渲染，效果实现。因为数据层次太多，render函数没有自动更新，需手动强制刷新。

v-show

v-if 当不符合条件时，压根不会有对应元素在 dom 中，而 v-show 就是个 display:none;

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue