Vue todos示例 在class中的应用表达式

Posted tommymarc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue todos示例 在class中的应用表达式相关的知识，希望对你有一定的参考价值。

本篇博客用到了v-if,v-on,v-for三个没有写到的知识点,以后会详细写三篇博客,详细写这三个方法的用处

直接上代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js 使用数组和对象控制Class </title>
    <script src="vue.js"></script>
    <script src="node_modules/axios/dist/axios.js"></script>
    <script src="node_modules/lodash/lodash.js"></script>
</head>
<body>
<style>
    .errorcolor:red;
    .successcolor:green;
</style>
<div id="ask"><!--vue不能控制body和html的标签-->
    <li v-for="v in list"><!--for循环语句以后再详细写-->
        <!--这个是今天主要的知识点-->
        <span :class="v.status?‘success‘:‘error‘">v.title</span>
        <!--if:判断语句以后再详细写-->
        <button v-on:click="ChangeStatus(v,false)" v-if="v.status">删除</button>
        <!--on:绑定的函数必须在methods里写-->
        <button v-on:click="ChangeStatus(v,true)" v-if="!v.status">恢复</button>
    </li>
</div>
<script>
    var app = new Vue( //实例化vue
        el:‘#ask‘,//vue控制id为ask的元素,
        methods:
            ChangeStatus:function (item,status) 
            item.status = status;
        
    ,
        data:
            list:[
                title:‘简单记录‘,status:true,
                title:‘mykeji.net‘,status:true
            ]
        ,

    );
</script>
</body>
</html>

 

以上是关于Vue todos示例 在class中的应用表达式的主要内容，如果未能解决你的问题，请参考以下文章

Vue语法学习第四课——组件简单示例

vue 作用域插槽

Vue2.0学习—class与style绑定（三十八）

ionic 官方 ToDo 示例中的错误

Vue2.x Todo之自定义指令实现自动聚焦的方法

Vue绑定class与绑定内联样式--v-bind