zoukankan      html  css  js  c++  java
  • vue 样式渲染,添加删除元素

    <template>
    <div>
    <ul>
    <li v-for="(item,index) in cartoon" :key="index" :class="{'A':'red','B':'green','C':'yellow','D':'blue','E':'pink '}[item.score]">
    {{item.name}},{{item.score}}
    <button @click="deleteC(index)">删除</button>
    </li>
    </ul>
    <input type="text" v-model="name" />
    <input type="text" v-model="score" />
    <button @click="addC">添加</button>

    </div>
    </template>

    <script>
    export default{
    data(){

    return{
    name:'',
    score:'',
    cartoon:[
    {id:'1',name:"加菲猫",score:"A"},
    {id:'2',name:"哆啦A梦",score:"B"},
    {id:'3',name:"葫芦娃",score:"C"},
    {id:'4',name:"变形金刚",score:"D"},
    {id:'5',name:"奥特曼",score:"E"}
    ]
    }
    },
    methods:{
    addC(){
    this.cartoon.push({
    name:this.name,
    score:this.score
    });
    this.name='';
    this.score='';
    },
    deleteC(index){
    this.cartoon.splice(index);
    }
    }
    }

    </script>

    <style>
    .red{
    background: red;
    }
    .green{
    background: green;
    }
    .yellow{
    background: yellow;
    }
    .blue{
    background: blue;
    }
    .pink{
    background: pink;
    }
    </style>

  • 相关阅读:
    在不给spring管理的类中获取类
    poi操作excel
    闭包
    输入url的过程发生了什么?
    跨域
    函数节流-防抖函数
    预解析-案例
    移动端适配方案
    实现元素水平居中和垂直居中的几种方法
    css小知识点
  • 原文地址:https://www.cnblogs.com/zhousen34/p/7640879.html
Copyright © 2011-2022 走看看