谷粒商城31 - 前端基础 VUE-指令-单向绑定&双向绑定

指令 v-html v-text指令

v-html v-text 代码示例如下 v-html 指令, 解析html 渲染到页面上 v-text 指令, 不会进行渲染, 而是直接显示文本

   
    
        {msg}}  -->
      
          {{1+1}}  {{hello()}} 

          
        
              

        
        
    
   
    

    
        new Vue({
            el:"#app",
            data:{
                msg:"Hello",
                link:"http://www.baidu.com"
            },
            methods:{
                hello(){
                    return "World"
                }
            }
        })
    

页面 显示效果如图 使用了 v-html 的, 显示成了标题的样式 使用了 v-text 的 ,显示了 html标签的原本的样子.

网速慢的问题

在网速慢的时候, 如果使用了 {{msg}}

在页面上 一开始会显示成 {{msg}} 只有等加载完成了, 才会变成 赋予的值. 而使用 v-html v-text 的时候, 就不会有这个问题, 因此推荐使用 v-html v-text, 而不是直接在页面上使用{{}} 进行值的绑定

v-bind

v-bind 给html标签的属性绑定 使用的代码如下 a标签的href 属性 , 动态的获取跳转的链接 . 直接写对应的link即可引用

   
    

       gogogo
   

   

   
       let vm = new Vue({
           el:"#app",
           data:{
               link: "http://www.baidu.com",
           }
       })
   

页面上可以看到 渲染的如下 , 点击链接也可以跳转到百度 class 是否加上的用法 class : true/false 具体用法如下

    
     
          你好
    
    
    
        let vm = new Vue({
            el:"#app",
            data:{
                isActive:true,
                hasError:true
            }
        })
    

页面显示如下, 可以看到是有这两个 属性的. 给某一个属性为false, 可以看到就没有这个属性了, v-bind 对style 进行动态赋值 完整的使用代码如下, 使用color1 和size来对样式动态的复制