zoukankan      html  css  js  c++  java
  • vue 基础随笔-

    v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
    v-else 你可以使用 v-else 指令来表示 v-if 的“else 块”。
    v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。
    v-else-if 顾名思义,充当 v-if 的“else-if 块”,可以连续使用:

    vue 中用 key 管理可服用的元素

    v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

    v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

    相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

    一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
    v-for 和 v-if 同时使用 v-for 具有比 v-if 更高的优先级

    控制台报错 [Vue warn]: Error in created hook: "TypeError: handler.call is not a function";
    此问题为调用中生命周期钩子函数引起来的错误,解决办法为 生命周期钩子函数 是否有未定义方法 还是 声名了空的钩子

    v-for 遍历对象的属性

    html 代码:
    <div v-for="item in obj">{{item}}</div> //循环出来的 是 值 hello kitty 20 东厂
    <div v-for="(item,name,index) of obj">{{name}}---{{item}}---{{index}}</div> //循环得到的 name ---name---hello kitty---0 age---20---1 gender---东厂---2

    js代码:

    let vm = new Vue({
      el:'#app',
      data:{
        obj:{
          name:'hello kitty',
          age:20,
          gender:'男'
        }
      }

    })

    数据的绑定:

    v-model  数据双向绑定

    <input v-model="message" placeholder="edit me">// 用法

    一般用法:

    <label for="checkbox">{{ checked }}</label>

    在vue中文本域 textare 绑定数据 在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效,应用 v-model 来代替。
    <textarea v-model="message" placeholder="add multiple lines"></textarea>

    如果 v-model 表达式的初始值未能匹配任何选项,<select> 元素将被渲染为“未选中”状态。在 iOS 中,这会使用户无法选择第一个选项。因为这样的情况下,iOS 不会触发 change 事件。因此,推荐提供一个值为空的禁用选项。

     注:素材来源于网诺 

  • 相关阅读:
    vmware 搭建内外网分开的三台centos7.9虚拟机
    CentOS 7 搭建frp内网穿透服务端
    CentOS 7 搭建frp内网穿透客户端
    Redis设计与实现读书笔记
    easyui 下拉框绑定成功之后,又无法显示
    easyui 实现后一个弹框向前一个弹框传值
    学会这七个Python GUI图形界面化库,就没有做不出来的界面!超有用!
    最新!用Python免费连接附近WiFi教程!没有我蹭不到的网!
    用Python实现九九乘法表的几种方式,入门必备案例!超级简单!
    为了每天准时看到冰冰,我用Python写了个自动提醒脚本,美滋滋!
  • 原文地址:https://www.cnblogs.com/yangyang520/p/11641475.html
Copyright © 2011-2022 走看看