data数据为sex的value为1或0，呈现的时候显示为“男”或“女”

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><script src="js/vue.js"></script&a

dongsdh

9098人浏览 · 2018-04-09 14:50:52

dongsdh · 2018-04-09 14:50:52 发布

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title></title>
</head>
<body>

<div id="container">

    <table>
        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody>
            <tr v-for="tmp in stuList">
                <!--<td v-for="value in tmp">-->
                    <!--{{value}}-->
                <!--</td>-->
                <td>{{tmp.name}}</td>
                <!--<td>{{tmp.sex}}</td>-->
                <td>{{tmp.sex>0?'男':'女'}}</td>
                <td>{{tmp.age}}</td>
            </tr>
        </tbody>
    </table>

</div>

<script>
    new Vue({
        el:'#container',
        data:{
            stuList:[
                {name:'michael',sex:1,age:20},
                {name:'miller',sex:1,age:21},
                {name:'lincoln',sex:0,age:23},
                {name:'lucy',sex:1,age:22},
                {name:'hanmeimei',sex:0,age:19}
            ]
        }
    })
</script>


</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^