1、v-show、v-if 指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04 VueJS常用指令</title>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<!-- 1、show指令 -->
<div v-show="sex == '男'">
性别：{{sex}}
</div>
<!-- 2、if-elseif-else指令 -->
<div v-if="age>0 && age<=20">
少年：{{age}}
</div>
<div v-else-if="age>20 && age<=30">
青年：{{age}}
</div>
<div v-else-if="age>30 && age<=50">
中年：{{age}}
</div>
<div v-else-if="age>50 && age<=100">
老年:{{age}}
</div>
<div v-else>
未知年龄段：{{age}}
</div>
<button @click="change_sex()">改变性别，看v-show指令的变化</button><br/>
<button @click="change_age()">年龄+5，看v-if指令的变化</button>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'你好，VueJS！',
sex: '男',
age: 10
},
methods:{
change_sex:function(){
this.age +=2;
if ('男' == this.sex) {
this.sex = '女'
} else {
this.sex = '男';
}
},
change_age:function(){
this.age +=5;
}
}
})
</script>
</body>
</html>将上述代码保存为if-test.html，用浏览器打开即可查看v-show、v-if指令的作用
2、for 指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04 VueJS常用指令</title>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<div v-for="item in user_ids">
用户编号：{{item}}<br>
</div>
<hr/>
<div v-for="news in news_list">
<div>{{news.title}}，{{news.author}}，{{news.read_num}}</div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'你好，VueJS！',
user_ids:[10010,10011,10012,10013,10014,10015],
news_list:[
{title:'新闻标题-01', author:'作者-01', read_num: 10},
{title:'新闻标题-02', author:'作者-02', read_num: 50},
{title:'新闻标题-03', author:'作者-03', read_num: 100},
{title:'新闻标题-04', author:'作者-04', read_num: 150},
{title:'新闻标题-05', author:'作者-05', read_num: 200}
]
}
})
</script>
</body>
</html>
3、style指令
当新闻阅读量为偶数时，增加一个style样式来加强显示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04 VueJS常用指令</title>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<div v-for="item in user_ids">
用户编号：{{item}}<br>
</div>
<hr/>
<div v-for="news in news_list">
<div v-show="news.read_num > 10"><!-- 阅读量>10的才显示 -->
<span v-if="news.read_num%2 == 0" :style="news_style">
{{news.title}}，{{news.author}}，{{news.read_num}}
</span>
<span v-else>
{{news.title}}，{{news.author}}，{{news.read_num}}
</span>
</div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'你好，VueJS！',
user_ids:[10010,10011,10012,10013,10014,10015],
news_list:[
{title:'新闻标题-01', author:'作者-01', read_num: 10},
{title:'新闻标题-02', author:'作者-02', read_num: 50},
{title:'新闻标题-03', author:'作者-03', read_num: 101},
{title:'新闻标题-04', author:'作者-04', read_num: 150},
{title:'新闻标题-05', author:'作者-05', read_num: 201}
],
news_style:{
backgroundColor:'#ccc'
}
}
})
</script>
</body>
</html>
4、class指令
当新闻阅读量为偶数时，并且阅读量超过了200，增加一个class属性来加强显示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04 VueJS常用指令</title>
<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<div v-for="item in user_ids">
用户编号：{{item}}<br>
</div>
<hr/>
<div v-for="news in news_list">
<div v-show="news.read_num > 10"><!-- 阅读量>10的才显示 -->
<span v-if="news.read_num%2 == 0" :class="['news_content',{'news_ext':news.read_num>200},'more']">
{{news.title}}，{{news.author}}，{{news.read_num}}
</span>
<span v-else>
{{news.title}}，{{news.author}}，{{news.read_num}}
</span>
</div>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'你好，VueJS！',
user_ids:[10010,10011,10012,10013,10014,10015],
news_list:[
{title:'新闻标题-01', author:'作者-01', read_num: 10},
{title:'新闻标题-02', author:'作者-02', read_num: 50},
{title:'新闻标题-03', author:'作者-03', read_num: 101},
{title:'新闻标题-04', author:'作者-04', read_num: 150},
{title:'新闻标题-05', author:'作者-05', read_num: 201},
{title:'新闻标题-06', author:'作者-06', read_num: 250}
]
}
})
</script>
<style>
.news_ext{
textShadow: '0 0 10px blue';
font-size: 40px;
}
</style>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/10486.html
