current position:Home>Vue todolist to-do case, three-level linkage, simple calculator, marquee case

Vue todolist to-do case, three-level linkage, simple calculator, marquee case

2022-09-23 06:42:06kind amumu

todo

<body>
    <div id="app">
        <input type="text" @keyup.enter="addItem">
        <!-- 遍历数据list -->
        <h3>未完成{
   {undolist.length}}</h3>
        <div v-for="item in undolist" :key="item.title">
            <input type="checkbox" v-model="item.done">
            <span>{
   {item.title}}</span>
            <button @click="delItem(item)">x</button>
        </div>
        <h3>已经完成{
   {donelist.length}}</h3>
        <div v-for="item in donelist" :key="item.title">
            <input type="checkbox" v-model="item.done">
            <span>{
   {item.title}}</span>
            <button @click="delItem(item)">x</button>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        computed: {
            // 通过计算list算出undolist没有完成的列表
            undolist() {
                //通过list过滤 返回item.done值为false的所有元素
                return this.list.filter(item => !item.done);
            },
            donelist() {
                //返回保留item.done值为true的元素
                return this.list.filter(item => item.done);
            },

        },
        methods: {
            //删除元素
            delItem(item) {
                //查找item在list的下标
                var ind = this.list.indexOf(item);
                //进行删除
                this.list.splice(ind, 1);
            },
            //添加元素
            addItem(e) {
                //e.target 输入的文本框
                //e.target.value 文本框的值
                this.list.unshift({ done: false, title: e.target.value })
                //清空文本框的内容
                e.target.value = "";
            }
        },
        data() {
            return {
                list: [
                    { done: true, title: "学习html" }
                ]
            }
        }

    })
    //目标:1 在文本框输入文字,按回车,文字添加到list里面
    // 目标:2 单击x,删除当前行
    // unshift 在数组的前面添加一个元素
    // splice(n,m,j)从第n个删除m个,添加j
    //indexOf(item)查找item在列表的下标
</script>

三级联动

<body>
    <div id="app">
        <p>A:{
   {selA}} B:{
   {selB}}</p>
        <select name="" id="" v-model="selA" @change="changeA">
            <option :value="item" v-for="item in list">{
   {item.name}}</option>
        </select>
        <select name="" id="" v-model="selB" @change="changeB">
            <option :value="item" v-for="item in selA.sub">{
   {item.name}}</option>
        </select>
        <select name="" id="" v-model="selC" v-if="selC">
            <option :value="item" v-for="item in selB.sub">{
   {item.name}}</option>
        </select>
    </div>
</body>
<script src="./js/items.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        methods: {
            changeA() {
                //A发生变化时,修改B的值
                this.selB = this.selA.sub[1];
                if (this.selB.sub) {
                    //如果B有sub,修改C的值
                    this.selC = this.selB.sub[1];
                }
            },
            changeB() {
                if (this.selAB.sub) {
                    this.selC = this.selB.sub[1]
                }
            }
        },
        data() {
            return {
                list: arrAll,  //所有的数据
                selA: arrAll[1], //The first level selected
                selB: arrAll[1].sub[1],  //选中的第二级
                selC: arrAll[1].sub[1].sub[1],  //三级
            }

        }
    })

</script>

json代码

var arrAll =
		[
			{name: "选择项目", sub: [
				{name: "请选择"},
				], 
			type: 1},
			{
				name: "厨房",
				sub: [
					{name: "请选择", sub: []},
					{
						name: "电路",
						sub: [{name: "请选择"}, {name: "灯具"},{name: "电闸"},{name: "The house is without power"},{name: "开关"},{name: "排风扇"},{name: "插座"},{name: "线路"},],
						type: 0
					},{
						name: "电器",
						sub: [{name: "请选择"}, {name: "电磁炉"},{name: "油烟机"},{name: "热水器"},{name: "燃气灶"},{name: "微波炉"}],
						type: 0
					},{
						name: "家具",
						sub: [{name: "请选择"}, {name: "电热水壶"}],
						type: 0
					},{
						name: "家居",
						sub: [{name: "请选择"}, {name: "桌台"}],
						type: 0
					},{
						name: "疏通",
						sub: [{name: "请选择"}, {name: "地漏疏通"},{name: "Wash pool dredge"},{name: "管道疏通"}],
						type: 0
					},{
						name: "水暖",
						sub: [{name: "请选择"}, {name: "闸门"},{name: "水龙头"},{name: "水管"},{name: "主管道"},{name: "暖气"}],
						type: 0
					},{
						name: "锁类",
						sub: [{name: "请选择"}, {name: "机械锁"},{name: "门锁"}],
						type: 0
					},{
						name: "主体",
						sub: [{name: "请选择"}, {name: "窗户"}],
						type: 0
					},
				], type: 1
			},
			{
				name: "客厅",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
			{
				name: "Living room bathroom",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
			{
				name: "客厅阳台",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
			{
				name: "卧室",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
			{
				name: "Bedroom balcony",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
			{
				name: "Bedroom bathroom",
				sub: [{name: "请选择", sub: []},
					{
						name: "餐桌",
						sub: [{name: "请选择"}, {name: "桌角"}],
						type: 0
					}],
				type: 1
			},
		]

简易计算器

<body>
    <div id="app">
        <input type="text" v-model.number="obj.pre" @input="calc">
        <select name="" id="" v-model="obj.type" @change="calc">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model.number="obj.next" @input="calc">
        =
        <span>{
   {obj.result}}</span>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                obj: {
                    pre: 1,
                    type: "+",
                    next: 1,
                    result: 2,
                }

            }
        },
        methods: {
            // 方法一
            // calc() {
            //     this.obj.result = eval(`(${this.obj.pre})${this.obj.type}(${this.obj.next})`)
            // }
            // 方法二
            calc() {
                if (this.obj.type === "+") {
                    this.obj.result = this.obj.pre + this.obj.next;
                } else if (this.obj.type === "-") {
                    this.obj.result = this.obj.pre - this.obj.next;
                } else if (this.obj.type === "*") {
                    this.obj.result = this.obj.pre * this.obj.next;
                } else if (this.obj.type === "/") {
                    this.obj.result = this.obj.pre / this.obj.next;
                }
            }
        }
    })

</script>

跑马灯

<body>
    <div id="app">
        <h1>{
   {str}}</h1>
        <button @click="play()">飘</button>
        <button @click="stop()">定</button>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                str: "Marquee yo-yo mountain",
                ind: null,  //停止动画
            }
        },
        //vue创建完毕,自动执行play
        created() {
            this.play();
        },
        methods: {
            play() {
                // 停止动画播放
                clearInterval(this.ind);
                this.ind = setInterval(() => {
                    // 字符串转数组
                    var temp = this.str.split('');
                    // 获取字符串第一个
                    var first = temp.shift();
                    // 添加到最后
                    temp.push(first);
                    // 转换为字符串,赋值给str
                    this.str = temp.join("");
                }, 50)
            },
            stop() {
                clearInterval(this.ind);
            }
        }
    })
            //把对象添加到数组的最前面 unshift
            //数据和表单绑定 v-model
            // 字符串第一个放在最后面
			// 字符串转数组 split('')
			// 删除数组第一个 shift
			// 添加到数组的最后一个push
			// 定时器 setInterval
			// 清除定时器 clearInterval
</script>

copyright notice
author[kind amumu],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/266/202209230621493396.html

Random recommended