基本指令 v – html // v -text // v-bind

基本指令 在开标签中书写  

   v-html 解析html相关语法 

  在变量的内容 是一段甚至一大段带有标签的字符串时使用
v-html                 <!-- //由于{{}}只能输出变量 ,有时候需要插入标签怎么办, //可以使用v-html  -->     <div id="myapp">         {{ooxx}}         <div v-html="message"></div>         <!-- //把message值 也就是H3标签插入当前div -->     </div>       <script>         var myapp = new Vue({             el: "#myapp",             data: {                 ooxx: ‘普通的显示hello vue.js ‘,                 message: "<h1>h1标签的显示i am not gay</h1>",             }         })     </script>  

vue在渲染的过程中 如何 解决 快速刷新 出现 {{}} 的问题

 第一种方式: v-text 直接输出文本 没有{{}} 就解决了闪屏问题 【v-text会覆盖使用标签内的内容】  <div id="app">       
  <div v-text=‘info‘>哈哈哈哈哈哈</div>   
【这个标签的内容会被info的内容覆盖】          
 <div>        
     <span>我的名字是:{{userInfo.name}}</span>        
      <span>我的年龄是: {{userInfo.age}}</span>        
  </div>

        <div>                 我的名字是:<span v-text=‘userInfo.name‘></span>         </div>       </div>     <script>         new Vue({             el:‘#app‘,             data:{//实际上写项目的时候  这个data赋值的内容 大都来自于接口(动态的)                                info:‘<h2>采菊东篱下</h2>‘,                 title:‘‘,//这个值是通过接口调取的                   userInfo:{                     name:‘张大大‘,                     age:5                 }             }         })     </script>  

v-bind

 <!--        动态数据绑定                v-bind: 可以简写成 :       -->   <div id="app">         <div>             <img v-bind:src="imgUrl" >     没有简化的         </div>         <div>             <img :src="headUrl" >     简化后的         </div>         <div>             <a v-bind:href="url">去购物</a>         </div>         <div>             <a :href="urlDetail" :title="name" >
title是规定元素的工具提示文本(tooltip text)   去学习</a>         </div>     </div>     <script>         new Vue({             el:‘#app‘,             data:{//实际上写项目的时候  这个data赋值的内容 大都来自于接口(动态的)                 imgUrl:‘http://img4.imgtn.bdimg.com/it/u=3599075280,1682155658&fm=11&gp=0.jpg‘,

                headUrl:‘http://img1.imgtn.bdimg.com/it/u=1847821041,2132076028&fm=11&gp=0.jpg‘,

                url:‘http://www.jd.com‘,

                urlDetail:‘http://xue.ujiuye.com‘,                                  name:‘穿云箭‘             }         })     </script>

相关文章