vue的一些坑和技巧

2024年4月7日 105次阅读 来源: 太羽

循环中img src标签调用失败

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

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

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

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

jq实现的话一行代码足以

$(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…

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

v-model传入的值默认类型是字符串，如果项目中需要根据v-model的值的类型来执行一些操作就比较麻烦，，比如判断用户输入的是否为数字可以使用isNaN()方法,isNaN():判断数值为非数字。

vue数据更新

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

富文本上传自动转码问题

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

    原文作者：太羽
    原文地址: https://segmentfault.com/a/1190000008429178
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞