vue的一些坑和技巧

时间 2019-11-10

标签 vue 一些技巧繁體版

原文原文链接

循环中img src标签调用失败

<li v-for='item in data'>
<img src='{{item.imgUrl}}' alt='{{item.name}}'>
</li>

这样使用src不会显示，要使用v-bind:src='item.imgUrl',具体不知道为啥，应该只是src很差用，后面的alt加大括号却没有问题html

vue实现切换样式(导航高亮)

情景：一个通过vue循环出来的导航列表，实现点击谁谁高亮，其余高亮的样式消失vue

jq实现的话一行代码足以json

$(obj).click(function(){
    $(this).addClass('on').siblings().removeClass('on');
})

//针对后续渲染的dom能够使用on()
$(obj).on('click',obj,function(){
    $(this).addClass('on').siblings().removeClass('on');
})

若是使用vue来实现的话咱们须要定义一个初始值为0的变量，点击导航的方法传入一个index的参数，让刚才定义的变量的值等于传进来的index，html结构上根据index来判断显示的class名称,若是flag的值域当前的index相同就显示高亮样式，下面是代码示例：
https://jsfiddle.net/zhoou/d6...segmentfault

判断v-model传入的值类型是数字

v-model传入的值默认类型是字符串，若是项目中须要根据v-model的值的类型来执行一些操做就比较麻烦，，好比判断用户输入的是否为数字能够使用isNaN()方法,isNaN():判断数值为非数字。数组

vue数据更新

数据更新包括数组更新和对象更新，这两个是有区别的，数组不能够使用索引的形式触发视图更新，而数组内的对象能够使用索引值的形式触发视图更新，数组的更新和编辑能够借助Vue.set或者splice(),对象的编辑能够借助vue.set
例子：https://jsfiddle.net/zhoou/8e...
写过项目以后理解得更深一些，回头看下文档发现vue文档写的很清楚。app

富文本上传自动转码问题

发送请求时将content-type的默认值application/x-www-form-urlencoded改成application/json
https://segmentfault.com/q/10...dom