用v-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>test</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 错误： -->
<div id="root">
<div v-if="n==1">{{a}}</div>
<div v-else-if="n==2">{{b}}</div>
<!-- v-if和v-else被打断了: -->
<div>@</div>
<div v-else-if="n==3">{{c}}</div>
<div v-else-if="n==4">{{d}}</div>
<div v-else style="font-weight: 700">{{e}}</div>
<button @click="n++">点我n加一</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
n: 0,
a: '欢迎',
b: '关注',
c: '公众号',
d: '学编程的GISer',
e: '欢迎关注公众号:学编程的GISer',
},
});
</script>
</body>
</html>
8. v-text
用于将数据填充到标签中，作用于插值语法表达式类似，但是没有闪动问题 （如果数据中有HTML标签会将html标签一并输出 ）
用法：
<!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>test</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>{{str}}</h1>
<h1 v-text="str">公众号:</h1>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
str: '学编程的GISer',
},
});
</script>
</body>
</html>
注意： 1. v-text会把解析到为文本完全替换掉标签里的内容,如上边例子中，页面上并没有显示出“公众号：”这几个字符，因为它被v-text完全替换掉了
-
不能解析字符串，v-text会把所有的字符串都当成正常的文本解析，不会当成标签，即使你的data里的str数据中有标签结构（比如:
<h1>123</h1>）
9. v-html
v-html和v-text的区别：它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
…………………… 共同点：都会全部替换原本标签里的内容。
<!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>test</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div v-html="name"></div>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
name: '<h1>Dapan</h1>',
},
});
</script>
</body>
</html>
cookie是浏览器存在硬盘里面的，浏览器刷新cookie也不会丢，而且cookie包含用户 的个人信息，不能随意泄露，但是，如果在网站上动态渲染HTML可能会导致XSS攻击：
总结：
v-html指令：
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
3.严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
10. v-cloak
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
下次课再讲！
