Vue.js Todo lista

Vue je javascript framework za izgradnju aplikacija koje se izvršavaju na klijentovom pregledniku. Vue je reaktivan to znači da se programer ne mora brinuti oko javascript-a koji će osvježavati html komponente

Ova scripta je jednostavan primjer kako napraviti jednostavnu todo listu. Instalacija se dodaje na početku sa: <script src="https://unpkg.com/vue@next"></script>. Imamo dvije metode (funkcije) addItem() i deleteItem() koje se nalaze pod methods:{}. Nakon svake akcije od starane klijenta i izmijene u nizu tasks tablica <table id="todoTable"> se refresh-a automatski sa novim podacima

 


<html>
<head>
    <script src="https://unpkg.com/vue@next"></script>
    <title>Todo list</title>
</head>
<body>

<div id="app">
    <input type="text" placeholder="naziv zadatka"  v-model="taskInput">
    <button @click="addItem">Dodaj</button><br>
    

        <table id="todoTable">
            <tr v-for="(task,index) in tasks">
              <td><b>{{index + 1}}.</b></td><td>{{task.content}}</td><td><button  @click="deleteItem(index)">Briši</button>
           </td>
           </tr>
           <tr><td colspan="2">Ukupno:</td><td>{{ukupno}}</td></tr>
        </table>

  </div>

    <script>
const app ={data(){
        return{
          taskInput : "",
          tasks : [],
          ukupno : 0,
    }

    },
    methods:{
        addItem(){
            if(this.taskInput!=""){
            newTask = {
                content : this.taskInput,
            }
            this.tasks.push(newTask)
            this.taskInput=""
            this.ukupno++;
            }
        },
        deleteItem(index){
            this.tasks.splice(index, 1);
            this.ukupno--;
        },
    }
}


Vue.createApp(app).mount("#app")

</script>

</body>
</html>
Prijestupne godine

Javascript za prijestupne godine

jQuery događaj

Kako povezati više input kontrola u jedan događaj (event) sa jQuery-om

Konvertor

Javascript konvertor kuna u eure

Padajući izbornik

Kako u html-u napraviti padajući izbornik koji se generira pomoću javascript-a?

Motivacija

Motivacija igra ključnu ulogu u našem životu, jer nas tjera da djelujemo prema našim ciljevima i željama.

AI

AI se sve više koristi u različitim industrijama, uključujući tehnologiju, zdravstvo, financije, automobilsku industriju, itd. To omogućuje automatizaciju procesa, smanjenje troškova

VS code

Evo mojih 10 najboljih savjeta za korištenje Visual Studio Code-a:

Tailwind CSS

Tailwind CSS je alat za brzo i jednostavno stvaranje modernih i atraktivnih web stranica. Ova biblioteka omogućuje brži i učinkovitiji razvoj web stranica