javascript

Vue集锦

目录
  1. 1. vue.js 未加载页面时会闪花括号
  2. 2. 页面正常显示，但是控制台报错：Cannot read property ‘xxx’ of undefined
  3. 3. 同时使用v-for和v-if
  4. 4. 在Vue的外部，调用Vue中定义的变量
  5. 5. vue去除前后空格trim
  6. 6. el-autocomplete select事件传递多个参数
  • 问题
  • 方法

    • vue.js 未加载页面时会闪花括号

    方法一：使用v-text，在没有编译之前，是不会显示的；

    1
    <template v-text="msg"></template >

    方法二：
    在上层加上v-cloak标签,并在css中配合样式:

    1
    2
    3
    [v-cloak] {
      display: none;
    }

    页面正常显示，但是控制台报错：Cannot read property ‘xxx’ of undefined

    出现这种问题，是因为在数据初始化object的时候赋值为null，然后在页面中使用了obj.xxx进行数据渲染，但是此时从后端还没来得及把数据赋值给obj造成的，只要obj初始化的时候不用null，而是用[]进行赋值就可以了。

    同时使用v-for和v-if

    场景：循环联系人列表，根据性别显示联系人颜色。
    Vue中，同一个节点不能同时使用v-for和v-if，下面的写法是错误的：

    1
    2
    3
    4
    5
    6
    <li v-for="item in peoples" v-if="item.man" :key="item.id">
        {{ item.name }}
    </li>
    <li v-else class="red" v-for="item in peoples" :key="item.id" v-else>
        {{ item.name }}
    </li>

    正确的方法：

    1
    2
    3
    4
    5
    6
    7
    8
    <template v-for="item in peoples">
        <li v-if="item.man" :key="item.id">
            {{ item.name }}
        </li>
        <li v-else class="red" :key="item.id">
            {{ item.name }}
        </li>
    </template>

    在Vue的外部，调用Vue中定义的变量

    1
    2
    3
    4
    5
    var vm = new Vue({
    		el: '#app',
    		data: {way: 1}
    	})
    console.log(vm.$data.way)

    vue去除前后空格trim

    一、使用trim修饰符
    <input v-model.trim = "massage" >

    二、使用filter过滤属性

    1
    2
    3
    4
    5
    6
    <ul id="list">
      <input type="text" v-model="list.name">
      <p>
      {{list.name | trim}}
      </p>
    </ul>

    el-autocomplete select事件传递多个参数

    问题

    1
    2
    3
    4
    5
    6
    <el-autocomplete
      v-model="state"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入内容"
      @select="handleSelect"
    ></el-autocomplete>

    这是 Element UI 官方文档中 ​​el-autocomplete​​ 的示例，而这里的 ​​handleSelect​​ 默认绑定的参数是你选中的那条数据。

    但是如果你需求用 ​​v-for​​ 生成多个组件，要把 ​​index​​ 给传进这个方法，你可能会这样做：

    ​​@select="handleSelect(item, index)"​​

    经试验这是行不通的，那么该如何做呢？

    方法

    1
    2
    3
    4
    5
    6
    <el-autocomplete
      v-model="state"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入内容"
      @select="((item) => {handleSelect(item, index)})"
    ></el-autocomplete>

    这样你就能在 ​​handleSelect​​ 方法中拿到 ​​index​​ 参数了。