vue中单选框，利用不存在的值标示选中状态

最新推荐文章于 2024-08-15 11:16:03 发布

dianpi2993

最新推荐文章于 2024-08-15 11:16:03 发布

阅读量126

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hongmaju/p/6728316.html

版权

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;
}