Ads Top

How to work with conditionally in vue js?

Vue conditional example:  We write code in vue same as js. When we type if-else conditions in vue, need to use “v-“ then you can write your code. As: v-if="goals.length === 0"

“V-if” gives our output on the browser when we see view source, we find HTML comment with if condition.

v-show="goals.length === 0" : v-show – gives us output on view source with style property displaynone; or displayblock;

When we write code as <ul v-else> you will not found what code has been written.

Complete code in below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>content-conditionally</title>
    <link href="content-conditionally.css" rel="stylesheet" />
    <script src="https://unpkg.com/vue@next" defer></script>
    <script src="content-conditionally.js" defer></script>
</head>
<body>
    <div class="main-container" id="user-goal">
        My Course Goal
        <hr />
        <input type="text" v-model="enteredGaolValue" />
        <button @click="addGoal">Add Goals</button>
        <!-- <div v-if="goals.length === 0">No goals have been added yet. 
Please add goals.</div>
        <ul v-if="goals.length > 0">
            <li>Sheo</li>
        </ul> -->
        <!-- <div v-show="goals.length === 0">No goals have been added yet. 
Please add goals.</div>
        <ul v-show="goals.length > 0">
            <li>Sheo</li>
        </ul> -->
        <hr />
        <div v-if="goals.length === 0">No goals have been added yet. 
Please add goals.</div>
        <ul v-else>
            <li v-for="(goal, index) in goals" :key="goal" 
@click="removeGoal(index)">
                <p>{{goal}} -- {{index}}</p>
                <input type="text" @click.stop>
            </li>
        </ul>
        <hr />
        <ul>
            <li v-for="(sss, key, index) in {name:'sheo', age:'30'}">
{{key}} : {{sss}} -- {{index}}</li>
        </ul>
        <hr />
        <ul>
            <li v-for="num in 5">{{num}}</li>
        </ul>
    </div>
</body>
</html>
..............................
body{
    margin0;
    padding0;
    font-familyArialHelveticasans-serif;
    font-size16px;
}
.main-container{
    max-width400px;
    margin30px auto;
    border1px solid #ccc;
    padding15px;
    text-aligncenter;
    border-radius10px;
}
.main-container button{
    background#0bf;
    border0;
    padding5px 10px;
    color#fff;
    border-radius5px;
    margin10px 5px;
}
#user-goal ul{
    list-stylenone;
    margin0;
    padding0;
}
#user-goal ul li{
    border1px solid #ccc;
    padding5px;
    margin5px 15px;
    displayinline-block;
}

....................................
const app = Vue.createApp({
    data(){
        return{
            enteredGaolValue:'',
            goals:[],
        }
    },
    methods: {
        addGoal() {
            this.goals.push(this.enteredGaolValue);
        },
        removeGoal(ss){
            this.goals.splice(ss, 1);
        }
    }
});
app.mount('#user-goal');

Also, we can use this example for the hide and show in vue:

<div class="main-container" id="assignment">
        <h2>Assignment</h2>
        <input type="text" v-model="enteredTaskValue" />
        <button @click="addTask">Add Task</button>
        <ul v-if="taskListVisible">
            <li v-for="task in tasks">{{task}}</li>
            <li>{{5+5}}</li>
        </ul>
        <!-- <div><button @click="showListToggle">
{{taskListVisible ? 'Hide':'Show'}}</button></div> -->
        <div><button @click="showListToggle">{{toggleText}}</button></div>
    </div>
..............................
const app = Vue.createApp({
    data(){
        return{
            enteredTaskValue: '',
            tasks:[],
            taskListVisible:true,
        }
    },
    computed:{
        toggleText(){
            return this.taskListVisible ? 'Hide List' : 'Show List'
        } 
    },
    methods:{
        addTask(){
            this.tasks.push(this.enteredTaskValue);
        },
        showListToggle(){
            this.taskListVisible = !this.taskListVisible;
        }
    }
    
});
app.mount('#assignment');



No comments:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.