List Rendering vue js 3

 

List Rendering

========================================================================================================

//output gulo display korbe array theke

//html

    <div id="app">

      <h1>skills</h1>

      <ul>

        <li v-for="skill in skills">

          {{skill}}

        </li>

      </ul>

  

    </div>

//js

var app = Vue.createApp({

    data(){

        return{ 

            skills: ['Html', 'Css', 'Php', 'Mysql', 'laravel', 'javascript', 'vue js']

          

        };  

        

    },

    methods: {   

        

    }    

});

app.mount('#app');

....................................

//new value add kora 

//html

  <div id="app">

      <h1>skills</h1>

      <input type="text" v-model="newSkill">

      <button @click="addskill">Add skill</button>

      <ul>

        <li v-for="skill in skills">

          {{skill}}

        </li>

      </ul>

  

    </div>

//js

var app = Vue.createApp({

    data(){

        return{ 

            skills: ['Html', 'Css', 'Php', 'Mysql', 'laravel', 'javascript', 'vue js'],

            newSkill: ""

          

        };  

        

    },

    methods: {   

        addskill(){

            this.skills.push(this.newSkill);

this.newSkill = "";  

        }

        

    }    

});

app.mount('#app');

---------

//index number display

 <div id="app">

      <h1>skills</h1>

      <input type="text" v-model="newSkill">

      <button @click="addskill">Add skill</button>

      <ul>

        <li v-for="(skill, i) in skills">    //index number display

            {{i}} {{skill}}

        </li>

      </ul>

  

    </div>

................................

//data remove after click on data

//html

    <div id="app">

      <h1>skills</h1>

      <input type="text" v-model="newSkill">

      <button @click="addskill">Add skill</button>

      <ul>

        <li v-for="(skill, i) in skills" @click="remove(i)">

            {{i}} {{skill}}

        </li>

      </ul>

  

    </div>

//js

var app = Vue.createApp({

    data(){

        return{ 

            skills: ['Html', 'Css', 'Php', 'Mysql', 'laravel', 'javascript', 'vue js'],

            newSkill: ""

          

        };  

        

    },

    methods: {   

        addskill(){

            this.skills.push(this.newSkill);

            this.newSkill = "";

        },

        remove(i){

            this.skills.splice(i, 1);

        }

        

    }    

});

app.mount('#app');

..............................................

//experience display 

//html

  <div id="app">

      <h1>skills</h1>

      <input type="text" v-model="newSkill">

      <button @click="addskill">Add skill</button>

      <ul>

        <li v-for="(skill, i) in skills" @click="remove(i)">

            {{i}} {{skill.name}} ({{skill.experience}})

        </li>

      </ul>

  

    </div>

//js

var app = Vue.createApp({

    data(){

        return{ 

            skills: [

                {name:'Html', experience: 5},

                 {name:'Css', experience: 6},

                  {name:'Php', experience: 7} 

                ],

            newSkill: ""

          

        };  

        

    },

    methods: {   

        addskill(){

            this.skills.push(this.newSkill);

            this.newSkill = "";

        },

        remove(i){

            this.skills.splice(i, 1);

        }

        

    }    

});

app.mount('#app');

................................