vue案例

走马灯

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

、循环渲染下列数据，展示数据的名字。点击这--行能够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>

 

posted @ 2021-11-22 21:55  青竹之下  阅读(177)  评论(0)  编辑  收藏  举报