vue中單選框，利用不存在的值標示選中狀態

時間 2019-11-08

標籤 vue 單選利用存在標示選中狀態简体版

原文原文鏈接

一、效果預覽

二、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>

三、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;
});

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。