Vue.js 具有实用性的一些案例，适合新手

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
        td, th {
            text-align: left;
        }
        .light {
            color: #ff0000;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="box">
    <input type="button" value="新增" @click="addUser"/>
    <table style="width: 300px">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item, index) in list" id="_table">
            <td>{{index + 1}}</td>
            <td>{{item.name}}</td>
            <td :class="item.sex == 'female' ? 'light' : ''">{{item.sex | sexFilter}}</td><!-- 利用三目运算，实现动态class -->
            <td>{{item.age}}岁</td>
            <td>
                <input type="button" value="打印" @click="printUser(item)"/>
                <input type="button" value="删除" @click="removeUser(index)"/>
            </td>
        </tr>
    </table>
    <br/>
    <div>
        <input type="button" value="获取随机数" @click="getPai"/>
        <label>{{random}}</label>
    </div>
    <br/>
    <div>
        <!-- @change事件，在input失去焦点才触发 -->
        <input type="text" v-model="input1" @change="console.log('input1被修改为：', input1)"/>
        <label>绑定输入框：{{input1}}</label>
    </div>
    <br/>
    <div>
        <input type="text" v-model="input2"/>
        <label v-if="input2%2 == 0">偶数</label>
        <label v-if="Math.abs(input2%2) == 1">奇数</label>
        <label v-if="Math.abs(input2%1) > 0 && Math.abs(input2%1) < 1">非整数</label>
    </div>
    <br/>
    <label v-show="input2 == 666">恭喜触发隐藏提示！</label>
</div>
<script src="../vue.min.js"></script>
<script>
    var boxVue = new Vue({
        el: '#box', // 绑定id为box的dom
        data: {
            list: [],
            random: '', //随机数
            input1: '',
            input2: 0
        },
        filters: { // 拦截器，一般用于格式化特殊数据
            sexFilter: function (val) {
                if (val == "male") {
                    return "男";
                } else if (val == "female") {
                    return "女";
                }
                return "未知";
            }
        },
        updated: function () {
            this.$nextTick(function () {
                //在下次 DOM 更新循环结束之后执行这个回调。在修改数据之后立即使用这个方法，获取更新后的DOM.
                console.log("3==我只能等页面渲染完了才会立即执行");
            });
        },
        mounted: function () { // 页面初始化之前执行，一般用于初始化获取数据
            var _this = this;
            _this.queryList();
        },
        watch: { // 用于监听数据变化
            list: function() { // 函数名就是data中的变量名，相呼应
                var _this = this;
                console.log(_this.list);
                // 渲染前获取不到table的html
                // var dom_table = document.getElementById("_table");
                // console.log(dom_table.innerHTML);
                this.$nextTick(function () { // 页面渲染完，table里才有数据
                    var dom_table = document.getElementById("_table");
                    console.log(dom_table.innerHTML);
                });
            }
        },
        methods: {
            queryList() {
                var _this = this;
                _this.list = [{
                    name: "张三",
                    sex: "male",
                    age: "15"
                }, {
                    name: "李四",
                    sex: "female",
                    age: "16"
                }, {
                    name: "王华",
                    sex: "unknown",
                    age: "17"
                }];
            },
            addUser() {
                var _this = this;
                _this.list.push({
                    name: "赵六",
                    sex: "male",
                    age: "22"
                });
            },
            removeUser(index) {
                var _this = this;
                _this.list.splice(index, 1); // 根据序号删除数组元素
            },
            printUser(item) {
                alert(item.name + "今年" + item.age + "岁。");
            },
            getPai() {
                var _this = this;
                _this.random = Math.random()*10;
            }
        }
    });
</script>
</body>
</html>
Vue.js 具有实用性的一些案例，适合新手

猜你喜欢
