打赏作者

Vue js computed 和 v-bind:class 的应用场景

Vue js 2.0 教程 >> Vue js computed 和 v-bind:class 的应用场景视频发布于 2016-11-09

在 Vuejs 中，computed proporty 对于代码逻辑和业务逻辑的出来非常有用，而 v-bind:class 则是应用于页面的样式和渲染方面，使得 Web 应用更具体验性，我们在这节视频中学习这两个内容。

登录并参与讨论

8年前

不是说这个系列的免费么

8年前

这个问题已经解决了，我没有给 newToDo 添加 complete 属性

有个问题，关于 completed class属性添加后，那个按钮颜色的变化。我在添加了1个 todo 后，按 complete 可以变颜色。但是添加了第二个，第三个之后，按了他们的 complete 后不会马上变颜色。当我想再添加一个 todo，把光标放到输入框，输入了一个字符后，之前所有做过的修改才会变化。

####这个问题是什么呀？

谢谢！

lioonline 回复 zcdll

8年前

methods 中的 addTodo function 里面也要添加completed

addTodo:function (newTodo) {
                if (newTodo.title !== '') {
                    console.log(newTodo.title)
                    this.todos.push(newTodo)
                    this.newTodo = {id:null,title:'',completed:false};
                }
            },

JellyBool 回复 lioonline

8年前

这个回复阔以！

a359611223 回复 lioonline

7年前

同样也是碰到这个问题核对了一下代码发现自己漏补了

dope2008 回复 lioonline

7年前

同样遇到这个问题，你的回复是解决了这个问题_{不过我还不是很明白} 为何newTodo的title不等于空的时候，执行下面的语句就可以解决？

8年前

额, 不是免费的么

JellyBool 回复 sishen0112

8年前

不是，不好意思。

8年前

收费嘞，不看了咯

8年前

难道不能单个视频收费么？非要捆绑销售？

JellyBool 回复 atricfox

8年前

暂时没有这个。如果你认为这是捆绑销售，我也没有办法啊，我只是觉得我的视频和传授的知识至少值这么一丢丢钱而已

atricfox 回复 JellyBool

8年前

我说捆绑销售用词可能过激，如有冒犯，十分抱歉。我承认知识的价值，但是建议开启单个视频的销售模式。

JellyBool 回复 atricfox

8年前

单个视频的再考虑吧

张锋回复 JellyBool

7年前

其实我是很愿意付费的，只是对于一个学生来讲最低三百比较贵。。。同样希望可以有单个视频的付费功能

8年前

可以分享源码那就更好啦

8年前

收费了。不开森。不过尊重传播知识者。

7年前

要是能提供代码下载就更方便了

7年前

无法播放该视频，请换一个支持HTML5视频功能的浏览器！啥情况这是？第一节还能看，后面的就看不了了。macpro2016,chrome浏览器@JellyBool

JellyBool 回复 zark

7年前

我这边都是 OK 的。。。。

zark 回复 JellyBool

7年前

第二个现在能看了，再去点第三个又来提示了

JellyBool 回复 zark

7年前

那可能就是网络原因了

7年前

为什么有几个视频显示不能播放，无法播放该视频，请换一个支持HTML5视频功能的浏览器，有些可以有些不可以

JellyBool 回复 z375742134

7年前

那感觉又拍云的cdn不行啊

z375742134 回复 JellyBool

7年前

什么意思？cdn？

z375742134 回复 JellyBool

7年前

啥时候能看到了

7年前

视频二三就是看不了。。。

JellyBool 回复 z375742134

7年前

我这边还是没有什么问题。。。

7年前

视频二三确实看不了

7年前

视屏2.3看不了啊

7年前

我学angualr2出现文件过多导致界面加载太慢，网络加载3秒，dom渲染+编译3秒，非常影响开发体验（当然正式部署不会那么慢），请问vue程序写大以后，会出现这种情况吗

JellyBool 回复 b545798400

7年前

我觉得怎么都不会出现这个情况啊。。。

7年前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 2.0</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
    <style>
        .completed{
            color:aquamarine;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-default navbar-static top">Vue js 2.0</nav>
        <div id="app" class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default">
                        <div class="panel-heading">Welcome Vue js 2.0</div>
                        <div class="panel-body">
                            <h1>My todos {todoCount}</h1>
                            <ul class="list-group">
                                <li class="list-group-item"
                                    v-bind:class="{'completed' : todo.completed}"
                                    v-for="(todo,index) in todos">
                                    {todo.title}
                                    <button class="btn  btn-xs pull-right"
                                            v-bind:class="[todo.completed ? 'btn-danger' : 'btn-success']"
                                            v-on:click="toggleCompletion(todo)"
                                    >{todo.completed? 'Done' : 'Do'}

                                    </button>
                                    <button class="btn btn-warning btn-xs pull-right"

                                        v-on:click="deleteTodo(index)"
                                    >Delete

                                    </button>

                                </li>
                            </ul>
                            <form v-on:submit.prevent="addTodo(newTodo)">
                                <div class="from-group">
                                    <input type="text"
                                           v-model="newTodo.title"
                                           class="form-control"
                                           placeholder="Add a new todo">
                                </div>
                                <br>
                                <div class="form-group">
                                    <button class="btn btn-success" type="submit">Add Todos</button>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>

<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'Hello World',
            todos:[
                {id:1,title:'Learn Vuejs',completed:false}
            ],
            newTodo:{id:null,title:'',completed:false}
        },
        computed:{
            todoCount:function(){
                return this.todos.length;
            }
        },
        methods:{
            addTodo(newTodo){
                this.todos.push(newTodo),
                this.newTodo = {id:null,title:'',completed:false}
            },
            deleteTodo(index){
                this.todos.splice(index,1)
            },
            toggleCompletion(todo){
                todo.completed = !todo.completed
            }
        }
    })
</script>
</body>
</html>

7年前

hi Jelly, 看到网站域名更新了，里面的视频播放器也更新了，没有了速度控制，学习效率降低了，因为平时我都是用x1.5， x1.75来看的，现在只能x1.0了。看看有没有时间加上速度调节功能。另外，视频播放器加了左右 arrow，能播放下一个上一个视频。很好的。
谢谢Jelly

7年前

这个视频无法播放下载也是下载到3M就报错

JellyBool 回复 uighurbabbage

7年前

OK,稍等，我去刷新一下资源

uighurbabbage 回复 JellyBool

7年前

挺快的么好的刚在群里@你了我2集返回416

JellyBool 回复 uighurbabbage

7年前

这里的 416 有点奇怪啊。我看看 cdn 的配置

uighurbabbage 回复 JellyBool

7年前

迅雷下载到3M就直接报任务错误

uighurbabbage 回复 JellyBool

7年前

现在恢复正常了

JellyBool 回复 uighurbabbage

7年前

OK。。估计就是资源缓存的问题。

7年前

站长……会员的默认头像从哪找的啊，感觉霸气的很

JellyBool 回复鱚囍

7年前

默认头像？使用的是 gavatar 的服务

15246650060@163.com

6年前

我想做一个管理后台 laravel vue 不想安装npm install 也不想单页，也不想用套模板，也不想编译，还想前后端分离但都放在larave框架中。
不编译的情况下，前端路由和传参怎么处理。怎么实现局部的刷新页面和数据呀

5年前

…