小王的学习笔记(十四)——vue数据渲染、事件处理、表单输入与绑定

数据渲染
  1. 基本数据渲染
    {{}} 内容可以为表达式,可以进行简单的逻辑运算

  2. 条件渲染
    v-if=''::可以为布尔类型 表达式
    根据条件判断,控制当前的节点是否显示到页面中,符合条件,如果不符合条件,不显示,不会被挂载在dom树上
    v-else: 前一兄弟元素必须有 v-ifv-else-if
    v-show:判断当前的条件是否成立,成立则显示在页面上,不成立则增加display:none,依旧会挂载在dom树上
    v-if有更高的切换消耗,而v-show有更高的初始渲染消耗;因此,如果是频繁切换,就用v-show;如果元素可能永远也不会被显示出来被用户看到, 则推荐使用 v-if

  3. 循环渲染
    v-for:vue中有复用政策,为了防止重复渲染,保证高效率的渲染,增加key可以标识组件的唯一性,有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

    div v-for="(item index) in arr" :key='item.id'/div
    

    v-forv-if一般不做嵌套使用,如果发生嵌套,v-for的优先级更高

  4. v-text 只是识别渲染文本,v-html会解析HTML标签然后进行数据渲染

  5. v-once 只在第一次执行时渲染数据,如果数据发生变化不会重新渲染

  6. v-bind 绑定属性 ,简写:,动态的绑定一个或多个属性。

事件处理、表单输入绑定
  1. v-on绑定事件,简写@
    事件修饰符:
    .once :只触发一次回调,当前事件只执行一次
    .prevent :阻止默认行为
    .stop:阻止冒泡
    .left :只当点击鼠标左键时触发。
    .right :只当点击鼠标右键时触发。
    .middle :只当点击鼠标中键时触发。
  2. v-model:在表单控件或者组件上创建双向绑定。
    修饰符:
    .lazy:取代 input 监听 change 事件,在change时而非input时更新
    .number:输入字符串转为有效的数字
    .trim:输入首尾空格过滤
表单
  1. 单行文本框

    div姓名input type="text" v-model.trim='form.username' /div
    
  2. 多行文本

    div简介textarea cols="30" rows="10" v-model='form.desc'/textarea/div
    
  3. 复选框
    hobby必须为一个数组

     div
            input type="checkbox" value="a" v-model='form.hobby'a
            input type="checkbox" value="b" v-model='form.hobby'b
            input type="checkbox" value="c" v-model='form.hobby'c
     /div
    
  4. 单选框

    div
        性别:
        input type="radio" value="1" v-model='form.gender'input type="radio" value="0" v-model='form.gender'/div
    
  5. 下拉框

    div id="example-5"
      select v-model="selected"
        option disabled value=""请选择/option
        optionA/option
        optionB/option
        optionC/option
      /select
      spanSelected: {{ selected }}/span
    /div
    new Vue({
      el: '...',
      data: {
        selected: ''
      }
    })
    
  6. 下拉多选时

    div id="example-6"
      select v-model="selected" multiple style="width: 50px;"
        optionA/option
        optionB/option
        optionC/option
      /select
      br
      spanSelected: {{ selected }}/span
    /div
    new Vue({
      el: '#example-6',
      data: {
        selected: []
      }
    })
    
最新回复(0)
/jishuz1s8TW7uVXoI3L9FsgzDLe7uiXEFMid2RSNPdd46THw_3D4719429
8 简首页