Vue-07-指令补充

2018-10-01  本文已影响0人  OrangeQjt

1.>v-html:指令下数据绑定会被忽略,而被当成HTML。
如果用到v-html指令时,需要单独添加一个元素来绑定
2.>v-text:操作元素中的纯文本。
v-text不解释标签,v-html解释标签;
v-text会将元素当成纯文本输出,v-html会将元素当成html标签解析后输出;
3.>v-once:只绑定一次。
当数据改变时,插值处的内容不会继续更新
v-pre原样输出;
v-clock:防止页面加载时出现vue.js的变量名;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
  <div id="app">
      <input type="text" v-model='mas'>
      <p v-html="mas">{{mas}}</p>
            <p v-text="mas">{{mas}}</p>
            <h1 v-clock>{{mas}}</h1>

  </div>
  <script src="../vue.js"></script>
   <script>
       new Vue({
           el:'#app',
           data:{
               mas:'hello'
           },
           beroreMount:function(){
               alert('beforeMount')
           }
       })
    </script> 
</body>
</html>
上一篇下一篇

猜你喜欢

热点阅读