<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <h1>{{msg}}</h1> <!-- 这是压根就没有渲染,不是css隐藏 --> <button @click="addValue()">按下修改图片</button> <h1>{{value}}</h1> <img v-if="value % 2 === 0" height="100px" src="../Pic/1.png"> <!-- 为了提高效率,可以使用v-else --> <!-- <img v-if="value % 2 != 0" height="100px" src="../Pic/2.png"> --> <!-- 这样效率高的多,不用再次运算一遍了 --> <img v-else height="100px" src="../Pic/2.png"> <br> <input type="number" v-model="temp"/> <h1>{{warn}}</h1> <br> <h1 v-if="temp <= 10">寒冷</h1> <h1 v-if="temp > 10 && temp <= 25">凉爽</h1> <h1 v-if="temp > 25">炎热</h1> <!-- 简写方法,但是这样写,中间不能断开 --> <h1 v-if="temp <= 10">寒冷</h1> <h1 v-else-if="temp <= 25">凉爽</h1> <h1 v-else>炎热</h1> </div> <script> const vm = new Vue({ el : "#app", data : { msg : "Hello", value : 1, temp : 0, warn : "" }, methods : { addValue() { this.value++; } }, watch : { temp : { immediate : true, deep : true, handler(newValue,oldValue) { if(newValue <= 10) { this.warn = "寒冷"; } else if(newValue <= 25 && newValue > 10) { this.warn = "凉爽"; } else if(newValue > 25) { this.warn = "炎热"; } } } } }); </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!-- 这是压根就没有渲染,不是css隐藏 -->
<button @click="addValue()">按下修改图片</button>
<h1>{{value}}</h1>
<img v-if="value % 2 === 0" height="100px" src="../Pic/1.png">
<!-- 为了提高效率,可以使用v-else -->
<!-- <img v-if="value % 2 != 0" height="100px" src="../Pic/2.png"> -->
<!-- 这样效率高的多,不用再次运算一遍了 -->
<img v-else height="100px" src="../Pic/2.png">
<br>
<input type="number" v-model="temp"/>
<h1>{{warn}}</h1>
<br>
<h1 v-if="temp <= 10">寒冷</h1>
<h1 v-if="temp > 10 && temp <= 25">凉爽</h1>
<h1 v-if="temp > 25">炎热</h1>
<!-- 简写方法,但是这样写,中间不能断开 -->
<h1 v-if="temp <= 10">寒冷</h1>
<h1 v-else-if="temp <= 25">凉爽</h1>
<h1 v-else>炎热</h1>
</div>
<script>
const vm = new Vue({
el : "#app",
data : {
msg : "Hello",
value : 1,
temp : 0,
warn : ""
},
methods : {
addValue()
{
this.value++;
}
},
watch : {
temp : {
immediate : true,
deep : true,
handler(newValue,oldValue)
{
if(newValue <= 10)
{
this.warn = "寒冷";
}
else if(newValue <= 25 && newValue > 10)
{
this.warn = "凉爽";
}
else if(newValue > 25)
{
this.warn = "炎热";
}
}
}
}
});
</script>
</body>
</html>
VUE框架使用v-if实现条件渲染代替watch监视属性实现动态变化------VUE框架
于 2023-11-29 15:15:55 首次发布