vue.js学习之路—01v-cloak、v-text、v-html、插值表达式、vue中MVVM模型所对应

xiaoxiao2025-04-13  17

1.vue中MVVM模型所对应 2.插值表达式 3.指令v-cloak、v-text、v-html 代码如下:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="test"><!--MVVM中的V:Vue实例控制的区域(View,视图)--> <!--v-cloak:能解决插值表达式闪烁的问题--> <span v-cloak> +++++++{{msg}}++++++++ </span> <!--默认v-text是没有闪烁问题的,但是会覆盖标签的内容,而插值表达式只会替换占位符的内容如{{msg}}--> <h3 v-text="msg">===============</h3> <!-- v-html:会按html语法执行,生成一个h1标题 --> <div>{{msg2}}</div> <div v-text="msg2"></div> <div v-html="msg2"></div> </div> <script type="text/javascript"> /** * MVVM关系 */ var vm = new Vue({/*new出来的实例是MVVM中的VM调度者*/ el:"#test", data:{/*MVVM模型中的M:用来保存每个页面的数据(Model,数据模型)*/ msg:"欢迎学习vue", msg2:"<h1>这是标题</h1>" } }); </script> </body> </html>

运行结果:

转载请注明原文地址: https://www.6miu.com/read-5028180.html

最新回复(0)