5. Vue v-text、v-html、v-bind的使用

v-text与v-html

v-text和{{}}一样
v-text不解释标签，v-html解释标签
在HTML输出data中的值我们可以用{{xxx}},但是有的时候比如网速卡的时候。会暴露出我们的{{}},所以这个时候我们就需要v-text和v-html。
当我们要是渲染不出来的情况下他就会出现{{xxx}},但是我们要是用了v-text 他要是渲染的慢，则加载不出来。页面上显示的就是null而不是{{message}}。

传统js写法：

innerHTML解释html格式
innerText无法解释html格式

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>v-text与v-html</title>
      <script src="js/vue.js"></script>
   </head>

   <body>
      <div id="app">
         <div id="div1"></div>
         <div id="div2"></div>
      </div>
   </body>

   <script>
      //view model
      //传统js写法 innerText和innerHTML
      window.onload = function(){
         document.getElementById("div1").innerHTML="<h1>Hello</h1>";
         document.getElementById("div2").innerText="<h1>Hello</h1>";
      }
   </script>
</html>

image.png

vue写法

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>v-text与v-html</title>
      <script src="js/vue.js"></script>
   </head>

   <body>
      <div id="app">
         <div v-text="message"></div>
         <div v-html="message"></div>
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el:"#app",
         data:{
            message:"<h1>Hello Vue!</h1>"
         }
      });
   </script>
</html>

image.png

v-bind

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。

插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>v-model</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
   <body>
      <div id="app">
         <font size="5" color="{{ys1}}">呵呵</font>
         <font size="5" color="{{ys2}}">哈哈</font>
      </div>
   </body>
   <script>
      //view model
      //插值表达式不能用于html标签的属性取值
      //要想给html标签的属性设置变量的值，需要使用v-bind
      new Vue({
         el:"#app",
         data:{
            ys1:"red",
            ys2:"green"
         }
      });
   </script>
</html>

无效果

image.png

v-bind简写方式:

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>v-model</title>
      <script src="js/vue.js"></script>
   </head>
   <body>
      <div id="app">
         <font size="5" v-bind:color="ys1">呵呵</font>
         <font size="5" :color="ys2">哈哈</font>
      </div>
   </body>
   <script>
      //view model
      //插值表达式不能用于html标签的属性取值
      //要想给html标签的属性设置变量的值，需要使用v-bind
      //v-bind也可以简化写法 直接使用:
      new Vue({
         el:"#app",
         data:{
            ys1:"red",
            ys2:"green"
         }
      });
   </script>
</html>

image.png

最后编辑于：2019.06.27 21:28:23