什么是vue Vue.js是什么？(2)
导读：什么是vue，v-if 条件性的渲染某元素，判定为true时渲染,否则不渲染 v-else 条件性的渲染某元素，判定为true时渲染,否则不渲染 v-else-if 条件性的渲染某元素，判定为t
什么是vue
3.1、v-text & v-html
| 指令 | 作用 |
|---|---|
| v-text | 设置标签的文本值 |
| v-html | 标签体绑定html代码字符串，类似于innerHTML的功能 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本插值</title>
</head>
<body>
<!-- 3、创建视图-->
<div id="div">
<!--示例：使用3种方式设置span标签体的内容-->
<div>方式1：<span>{{msg}}</span></div>
<div>方式2：<span v-text="msg"></span></div>
<div>方式3：<span v-html="msg"></span></div>
</div>
</body>
<!--1、引入js-->
<script src="js/vue.js"></script>
<script>
//目标：给视图标签体绑定数据
//方式1：{{变量名}} 插入值表达式，标签体绑定文本字符串，类似于innerText的功能
//方式2：v-text="变量名"，与{{变量名}}功能一样
//方式3：v-html="变量名"，标签体绑定html代码字符串，类似于innerHTML的功能
// v-html 或 v-text 都是设置在视图标签的属性位置
// 2、创建核心对象
new Vue({
el:"#div",
data:{
msg:"<h1>Hello Vue</h1>"
}
});
</script>
</html>1、{{变量名}} 插入值表达式，标签体绑定文本字符串，类似于innerText的功能
2、v-text=”变量名”，与{{变量名}}功能一样
3、v-html=”变量名”，标签体绑定html代码字符
3.2、v-if & v-show
| 指令 | 作用 |
|---|---|
| v-if | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
| v-else | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
| v-else-if | 条件性的渲染某元素，判定为true时渲染,否则不渲染 |
| v-show | 根据条件展示某元素，区别在于切换的是display属性的值 |
