本文是Vue.js入门学习的第一部分，介绍了插值表达式、v-bind动态绑定属性、v-text与v-html的区别、v-if与v-show的条件渲染以及它们之间的区别。通过实例展示了如何在Vue中设置标签内容、动态绑定属性，并探讨了何时使用v-if和v-show。
插值表达式
{{属性名/方法名()/表达式}}把结果渲染在DOM元素中文本注意: 不能使用if-else结构,可以使用 三目运算
表达式? 值1:值2
例如：
<div id="app">
<h2>{{message}}</h2> //插入属性
<h2>{{1+2}}</h2> //插入表达式
<h2>{{fun()}}</h2> //插入方法
<h2>{{flag?1:0}}</h2> //插入三目运算符
<!-- <h2>{{if(flag){return 1}else{return 0}}}</h2> -->//报错
</div>
<script>
// 1.创建app
const app = Vue.createApp({
data: function() {
return {
message: "Hello Vue", //定义属性并赋值
flag:true
}
},
methods:{
fun(){ //定义方法，并返回值
return "你好";
}
}
})
// 2.挂载app
app.mount("#app")
</script>
运行结果：
v-bind 动态绑定一个或者多个属性
在
html标签原生属性前写v-bind, 可让原生标签调用data中的属性例如：
<h2 v-bind:class="data中的属性"></h2>
v-bind可简写为：例如：
<h2 :class="data中的属性"></h2>
<div id="app">
<!-- <h2 v-bind:class="styleA">{{message}}</h2> -->
<!--简写-->
<h2 :class="styleA">{{message}}</h2>
<!-- <div v-bind:id="att.id" v-bind:class="att.class">我是div</div> -->
<div v-bind="att">我是div</div>
</div>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data: function() {
return {
message: "Hello Vue",
styleA:'green',
att:{
id:"box",
class:"red"
}
}
},
methods:{
}
})
// 2.挂载app
app.mount("#app")
</script>
<style>
.red{
color:red;
font-size:20px;
}
.green{
color:green;
font-size:20px;
}
</style>
控制台的源代码：（可见控制台源代码，已经将data中属性att中的值{id:'box' class:'red'}，写到源代码上）
输出结果：
当然我们给标签赋值的类型有很多种，比如直接赋值data属性，赋值数组，三目运算符判断
例如：
<div id="app">
<!--第一种写法: 字符串(data变量名) :样式类名不确定,个数确定-->
<!-- <h2 :class="styleA">{{message}}</h2> -->//给标签属性赋予一个变量值，我们就可以通过改变变量，从而动态改变标签属性的属性值
<!--第二种写法: 对象: {类名:boolean变量,类名2:boolean变量} 类名确定,个数确定: 是否使用不确定 -->
<!-- <h2 :class="{red:isUse}">{{message}}</h2> -->//如果isUse值为true返回red，反之没有返回值，即class，（因为没有返回值，所以只有标签属性名，没有没钱属性名所对应的值）
<!--三目运算-->
<!-- <h2 :class="isUse?'red':'green'">{{message}}</h2> -->//如果isUse值为true则返回red，反之返回green
<!--数组变量 -->
<h2 :class="classArr">{{message}}</h2>
<button @click="changeStyle">按钮</button>
</div>
<script type="text/javascript" src="./js/vue.global.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data: function() {
return {
message: "Hello Vue",
styleA:'green',
isUse:false,
index:1,
classArr:['bg','size']
}
},
methods:{
changeStyle(){
//this.styleA = 'red';
//this.isUse = true;
//this.classArr.push('red')
//this.classArr.shift();
//删除第二个元素
this.classArr.splice(1,1,'red')
}
}
})
// 2.挂载app
app.mount("#app")
</script>
<style>
.red{
color:red;
font-size:20px;
}
.green{
color:green;
font-size:20px;
}
.size{
height: 50px;
width: 200px;
}
.bg{
background-color: skyblue;
}
</style>
v-text和v-html设置标签内容
两者都是用于设置标签内容，但是两者还是有一定的区别的
区别：
v-text：不能把内容中的内容中的标签进行显示,简单来说，v-text显示的是纯文本内容
v-html：当内容中存在标签时，帮助我们解析标签并显示在页面上
例如：
<div id="app">
<!-- <h2>{{message}}</h2> -->
<!--v-text设置标签文本: 内容包含标签, 只是当成普通文本-->
<!-- <span v-text="message"></span> -->
<!--v-text设置标签内容: 内容包含标签,渲染成标签-->
<span v-html="message"></span>
</div>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data: function() {
return {
message: "<b>Hello Vue</b>"
}
},
})
// 2.挂载app
app.mount("#app")
</script>
v-if条件渲染
dom元素是否渲染,
如果条件为true, 在页面展示, dom包含这个标签
如果条件为false, 在页面不展示, dom不包含这个标签
<div id="app">
<h2 v-if="score >= 90">优秀</h2>
<h2 v-else-if="score >= 80">良好</h2>
<h2 v-else-if="score >= 60">及格</h2>
<h2 v-else>不及格</h2>
</div>
<script type="text/javascript" src="./js/vue.global.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data: function () {
return {
score: 90,
}
},
})
// 2.挂载app
app.mount("#app")
</script>
但是当我们有一个块级进行条件判断显示与否时，我们要怎么做呢
如：(有两位同学的信息，现在要求只显示分数大于90分的学生的姓名、年龄及成绩)
stu: {
name: '张三',
age: 18,
score: 95
},
stu1: {
name: '李四',
age: 18,
score: 85
}
是不是有同学说那我就一个一个判断，姓名判断一次，年龄判断一次，成绩判断一次，如下：
<h2 v-if="stu.score >= 90">姓名:{{stu.name}}</h2>
<h2 v-if="stu.score >= 90">年龄:{{stu.age}}</h2>
<h2 v-if="stu.score >= 90">优秀</h2>
//但是很明显我们每有一条数据就要写一次判断语句，代码过于繁杂
还有同学说，那把他们拿一个父级div装起来，判断父级就可以了呀，如下：
<div v-if="stu.score >= 90">
<h2>姓名:{{stu.name}}</h2>
<h2>年龄:{{stu.age}}</h2>
<h2>优秀</h2>
</div>
//但是我们知道，在前端中，div层次越深，调整就越麻烦，有时候就是因为多加了一个div样式就完全乱了，那有没有一个种，既不用设置父级又能减少代码量的方法呢，答案是有！
templates标签
<!--vue使用templates标签包裹: 不会额外添加一个父标签 -->
<template v-if="stu.score >= 90">
<h2>姓名:{{stu.name}}</h2>
<h2>年龄:{{stu.age}}</h2>
<h2>优秀</h2>
</template>
v-show
控制元素是否显示: 控制的标签的display的样式属性,
如果条件为true, 显示
如果条件为false, 不显示, display="none", 但是这个标签存在
<div id="app">
<h2 v-show="stu.score >=90">姓名:{{stu.name}}</h2>
<h2 v-show="stu.score >=90">年龄:{{stu.age}}</h2>
<h2 v-show="stu.score >=90">优秀</h2>
</div>
<script type="text/javascript" src="./js/vue.global.js"></script>
<script>
// 1.创建app
const app = Vue.createApp({
// data: option api
data: function () {
return {
stu: {
name: '张三',
age: 18,
score: 95
},
stu1: {
name: '李四',
age: 18,
score: 85
}
}
},
})
// 2.挂载app
app.mount("#app")
</script>
我们可看出v-if和v-show的功能类似，要求只显示分数大于90分的学生的姓名、年龄及成绩的templates标签方法能不能用呢，答案是不能，我们要知道v-show的原理，v-show控制的是标签的display属性，而templates标签并没有生成div也就不存在display属性，所以当使用v-show时只能一条一条添加判断条件或者是用父级div框起来
v-if与v-show区别:
v-if与v-show的比较:
首先，在用法上的区别：
v-show是不支持template；
v-show不可以和v-else一起使用；
其次，本质的区别：
v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换；
v-if当条件为false时，其对应的原生压根不会被渲染到DOM中；
开发中如何进行选择呢？
如果我们的元素需要在显示和隐藏之间频繁的切换，那么使用v-show；
如果不会频繁的发生切换，那么使用v-if；
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
