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 display: none; or display: block;
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{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
.main-container{
max-width: 400px;
margin: 30px auto;
border: 1px solid #ccc;
padding: 15px;
text-align: center;
border-radius: 10px;
}
.main-container button{
background: #0bf;
border: 0;
padding: 5px 10px;
color: #fff;
border-radius: 5px;
margin: 10px 5px;
}
#user-goal ul{
list-style: none;
margin: 0;
padding: 0;
}
#user-goal ul li{
border: 1px solid #ccc;
padding: 5px;
margin: 5px 15px;
display: inline-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.