1、效果预览

2、index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0">

    <title>Title</title>

    <link rel="stylesheet" href="css/index.css">

</head>

<body>

<div id="app">

<!--<h2>{{title}}</h2>-->

    <li v-for="(item,index) in productList">

        <div >产品名称：{{item.productName}}</div>

        <a href="javascript:;" class="item-check-btn" v-bind:class="{'check':item.checked}" @click="selectedProduct(item);">

        </a>

    </li>

</div>

<script src="js/lib/vue.min.js"></script>

<script src="js/lib/vue-resource.min.js"></script>

<script src="js/cart.js"></script>

</body>

</html>

3、cart.js

/**

 * Created by kk on 2017/4/16.

 */

new Vue({

    el:"#app",

    data:{

        // title:"hello vue"

        totalMoney:0,

        productList:[]

    },

    filters:{

formatMoney:function (value) {

    return "￥"+value.toFixed(2)

}

    },

    mounted:function () {

        //类似于jquery中的ready方法

        this.$nextTick(function () {

            this.cartView();

        })

    },

    methods:{

        selectedProduct:function (item) {

            //alert("1");

            if(typeof item.checked=="undefined"){

                //Vue.set(item,"checked",true);//全局注册checked

                this.$set(item,"checked",true);//局部注册checked

            }

            else {

                item.checked=!item.checked;

            }

        }

    }

});

Vue.filter("money",function (value,type) {

    return "￥"+value.toFixed(2)+type;

});

4、index.css

img {

    width: 50px;

}

a {

    font-size: 30px;

    color: #000;

    text-decoration: none;

}

.check{

    background: #EE7A23;

    border-color: #EE7A23;

}

.item-check-btn {

    display: inline-block;

    width: 16px;

    height: 16px;

    border: 1px solid #ccc;

    border-radius: 50%;

    text-align: center;

    vertical-align: middle;

    cursor: pointer;

}

vue中单选框，利用不存在的值标示选中状态的更多相关文章

  1. vue中单选框与多选框的实现与美化

    我们在做一些页面时,可能会用到很多的单选框和复选框,但是原生的radio和checkbox前面的原型图标或方框样式不尽人意.于是,决定自己来实现单选框和复选框.我用的是vue,所以就用vue的方式实现 ...

  2. vue+elementUI中单选框el-radio设置默认值和唯一标识某个单选框

    vue+elementUI中单选框el-radio设置默认值 如果后台返回的单选框的值是number:单选框的lable需要设置成 :lable='0';如下: <el-form-item la ...

  3. WPF中单选框RadioButton

    单选框RadioButton的基本使用: <StackPanel Margin="10"> <Label FontWeight="Bold"& ...

  4. 用css实现html中单选框样式改变

     我们都知道,input的单选框是一个小圆框,不能直接更改样式.但是我们在很多网页中看到的单选框样式可不仅限于默认的那个样式(看上去没啥新意,也比较丑).那么,接下来我将介绍下如何实现该功能. 首先, ...

  5. form中 单选框 input[type="radio"] 分组

    在form中有时候需要给单选框分组,这种情况下 可以通过给单选框设置相同的name来进行分组: <html> <head> <title> </title&g ...

  6. 单选框radio总结（获取值、设置默认选中值、样式）

    单选框 radio <div class="radio-inline"> <input type="radio" name="kil ...

  7. 简述vue中父子组件是怎样相互传递值的（基础向）

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么?   父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...

  8. 解决vue中模态框内数据和外面的数据绑定的问题

    1.做表格的修改,把整条数据传到模态框做修改,但是出现模态框改变数据没有保存时,表格的数据也会跟着改变,我想实现保存以后表格数据才会改变的功能. html:使用item整条数据都上传过去了,在upda ...

  9. Android中单选框RadioButton的基本用法

    总结一下设置图标的三种方式: (1)button属性:主要用于图标大小要求不高,间隔要求也不高的场合. (2)background属性:主要用于能够以较大空间显示图标的场合. (3)drawableL ...

随机推荐

  1. 既有e^x又有sinx或cosx的积分题的解法

    楼上三位,一致对e^x情有独钟,他们都是对的.通常,这类题既有e^x又有sinx或cosx的积分题,一般的解法是:1.选定e^x,或选定sinx.cosx,就得“从一而终”,用分部积分的方法计算,   ...

  2. 字符串处理-Hdu1004

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1004 题目大意:给你一个数n,要求输入n个字符串,在这n个字符串中,我们需要输出出现次数最多的字符串. ...

  3. 从源码看Spring Boot 2.0.1

    Spring Boot 命名配置很少,却可以做到和其他配置复杂的框架相同的功能工作,从源码来看是怎么做到的. 我这里使用的Spring Boot版本是 2.0.1.RELEASE Spring Boo ...

  4. 【RAY TRACING THE REST OF YOUR LIFE 超详解】 光线追踪 3-5 random direction & ONB

     Preface 往后看了几章,对这本书有了新的理解 上一篇,我们第一次尝试把MC积分运用到了Lambertian材质中,当然,第一次尝试是失败的,作者发现它的渲染效果和现实有些出入,所以结尾处声明要 ...

  5. SSID 已经一个路由器设多个SSID

    SSID(Service Set Identifier)   SSID,AP唯一的ID码,许多人认为可以将SSID写成ESSID,其实不然,SSID是个笼统的概念,包含了ESSID和BSSID,用来区 ...

  6. nodejs那些事儿

    http://www.nodeclass.com/ https://cnodejs.org/ 当前版本,v6.11.2 安装node时,牵扯features的选择,在不了解的情况下,我选择了第1个.网 ...

  7. POJ.3648.Wedding(2-SAT)

    题目链接 题意看这吧..https://www.cnblogs.com/wenruo/p/5885948.html \(Solution\) 每对夫妇只能有一个坐在新娘这一边,这正符合2-SAT初始状 ...

  8. 理清cordova插件的调用流程

    从调用的角度看流程  前端调用(clobbers)——>cordova_plugins.js(clobbers对应插件id和插件文件所在的路径)—–>js部分(配置着插件的名字,已经插件里 ...

  9. Ubuntu GNOME 13.04将关闭窗口的按钮放在最右边

    转载请注明:转自http://blog.csdn.net/u010811449/article/details/9426187 先上图: 首先打开dconf系统配置编译器. 找到 rog -> ...

  10. C#高级编程----错误和异常的总结

    错误和异常的总结 因为总结吗,,可能概念啥的比较多,大家要学着适应. 首先是C#中的异常用老处理系统级和用户级的错误状态,是一种结构化,统一的类型安全的处理机制. 因为鄙人开始想走C++的道路,所以搞 ...