vue 经典案例

最新推荐文章于 2024-09-02 10:17:00 发布

随''blow...而过

最新推荐文章于 2024-09-02 10:17:00 发布

阅读量120

点赞数

文章标签： vue.js javascript 前端 ecmascript 前端框架

本文链接：https://blog.csdn.net/liatajkd/article/details/133009660

版权

1、走马灯

<body>
<div id='app'>
    <button @click="start">浪起来</button>
    <button @click="stop">低调</button>
    <h3>{{title}}</h3>
</div>
</body>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            title:"不要浪，别团",
            Interva: null
        },
        methods: {
            start(){
                clearInterval(this.Interva)
                console.log(this.title.substr(0,1));
                console.log(this.title.substring(0, 1));
                this.Interva = setInterval(()=>{
                    this.title = this.title.substr(1) + this.title.substring(0,1);
                },300)
            },
            stop(){
                clearInterval(this.Interva);
            }
        }
    })
</script>

2、简单计算器

<body>
    <div id="app">
        <input type="text" v-model='num1'>
        <select v-model='opration'>
            <option value="+">+</option>
            <option value="-" selected>-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="num2">
        <button @click="calc">=</button>
        <span style="background-color: aqua;">{{sum}}</span>
    </div>
</body>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            num1: 0,
            opration: "-",
            num2: 0,
            sum: 0
        },
        methods: {
            calc() {
                this.num1 = Number(this.num1);
                switch (this.opration) {
                    case "+":
                        this.sum = this.num1 + this.num2;
                        break;
                    case "-":
                        this.sum = this.num1 - this.num2;
                        break;
                    case "*":
                        this.sum = this.num1 * this.num2;
                        break;
                    case "/":
                        this.sum = this.num1 / this.num2;
                        break;
                }
            }
        }
    })
</script>

3、循环渲染下列数据，展示数据的名字。点击这--行能够alert出数据的名字。顶部有搜索框，后面有个搜索按钮
点击搜索按钮可以按照输入的内容检索列表。

    <div id="app">
        {{title}}
        <ul>
            <!-- i为索引 item为内容 -->
            <input type="text" v-model="item1">
            <button @click="search">检索</button>
            <li v-for="(item,i) in list" @click="show(item.name)" v-show="flag">id：{{item.id}} ----值：{{item.name}}</li>

        </ul>
        <ul>
            <li v-for="(item,i) in list1">id：{{item.id}} ----值：{{item.name}} </li>
        </ul>
    </div>
</body>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            list: [{ id: 3, name: "张三丰" },
            { id: 5, name: "张无忌" },
            { id: 13, name: "杨逍" },
            { id: 33, name: "殷天正" },
            { id: 12, name: "赵敏" },
            { id: 97, name: "周芷若" }],
            list1: [],
            item1: null,
            flag:true
        },
        methods: {
            show(name) {
                alert(name);
            },
            search() {
                this.list1 = this.list.filter(item => {
                    return item.name == this.item1;
                })
                if(this.list1.length==0){
                    this.flag = true;
                }else{
                    this.flag = false;
                }
            }
        }
    })
</script>