上节复习
随着flag旗子true/false变颜色:
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<id id="app">
<!-- 如果flag为false,显示蓝色,flag显示true,显示红色 -->
<p style='color:aqua;'> 显示javascript表达式</p>
</id>
<script>
var vm =new Vue({
el:'#app',
data:{
flag:false
},
methods:{
}
})
</script>
</body>
</html>
需求:随着旗子变颜色——三元运算符语法
三元运算符语法:属性值:条件?条件成立的值:条件不成立的值
条件成立true:
字符串拆分:split
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 如果flag为false,显示蓝色,flag显示true,显示红色 -->
<!-- <p style='color:aqua;'> 显示javascript表达式</p> -->
<!-- 三元运算符语法:条件?条件成立的值:条件不成立的值 -->
<p v-bind:style="{color:flag?'red':'blue'}"> 显示javascript表达式</p>
<!-- 文本中,用split -->
<h1>{
{
userneme}}</h1>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
flag:true,
userneme:"hello world"
},
methods:{
}
})
</script>
</body>
</html>
拆分:
v-if语句
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 需求:weather sun:出去玩;weather rain 在家睡觉;weather other:上班 -->
<p v-if="weather=='rain'">雨天</p>
<p v-if="weather=='sun'">出去玩</p>
<p v-if="weather=='other'">上班工作</p>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
weather:"rain"
},
methods:{
}
})
</script>
</body>
</html>
v-if,v-else-if,v-else语句
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 需求:weather sun:出去玩;weather rain 在家睡觉;weather other:上班 -->
<p v-if="weather=='rain'">雨天</p>
<p v-else-if="weather=='sun'">出去玩</p>
<p v-else>上班工作</p>
</div