其他分享
首页 > 其他分享> > <二>数据和方法的绑定

<二>数据和方法的绑定

作者:互联网

上一节学习了参数和方法的定义,现在学习下vue的一些语法。

1、渲染 :{{  }},v-text,v-html的使用

 <div id="app">
            {{ message }}     //插值表达式: 直接将定义的变量放在 hmtl中,使用两个中括号包起来,这里是可以使用js 函数,比如:message.join('')
        </div>       
 <div id="app" v-text="message">  //v-text可以向元素中输出文本内容     
        </div>    
 <body>
        <div id="app" v-html="message">  //v-html不仅可以向元素中输出文本,也可以直接输出带样式的一些元素
           
        </div>       
    </body>
    <script src="vue.js"></script>
    <script>
       var app = new Vue({
                  el: '#app',
                  data: {
                    message: '<h2>h</h2>'               
                  },                               
                })
    </script>

2、绑定:v-bind的使用,用来绑定全局属性  id,title,style,class 等

<body>
        <div id="app" >          
                 <span v-bind:title="message +' '+ msg">{{message}}</span> 
        </div>       
    </body>
    <script src="vue.js"></script>
    <script>
       var app = new Vue({
                  el: '#app',
                  data: {
                    message:'Hello vue!',    
                    msg:'yy'                     
                  }                                      
                })
    </script>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .active {
                width: 100px;
                height: 100px;
                background: green;
            }
            .text-danger {
                background: red;
            }
        </style>
    </head>

    <body>
        <div id="app" >          
            <div  v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>
            <div v-bind:class="classObject"> </div>
            <div v-bind:class="classObject1"> </div> 
            <div v-bind:class="[activeClass, errorClass]"></div>      
            <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>      
    </body>
    <script src="vue.js"></script>
    <script>
       var app = new Vue({
                el: '#app',
                data:{
                    isActive: true,
                    hasError: true,
                    activeClass:'active',
                    errorClass:'text-danger',
                    classObject:{ 
                        'active': true,
                        'text-danger': true
                    }
                },
                computed: {
                    classObject1: function () {
                        return {
                            'active': this.isActive,
                            'text-danger': this.hasError,
                        }
                    }
                }                                                                                         
         })
    </script>
</html> 
   <body>
        <div id="app" >          
            <div v-bind:style="{ color:colorGreen, fontSize: fontSize + 'px',background:'red' }">内联样式</div>
            <div v-bind:style="styleObject">绑定样式对象</div>
            <div v-bind:style="[styleObject, styleObject1]">多样式绑定</div>
    </body>
    <script src="vue.js"></script>
    <script>
       var app = new Vue({
                el: '#app',
                data:{
                    colorGreen: 'green',
                    fontSize: 12 ,
                    styleObject: {
                        color: 'green',
                        fontSize: '30px',
                        background:'red'
                    },
                    styleObject1: {                       
                        fontSize: '12px',
                    }  

                },                                                                                        
         })
    </script>

3、条件语句 v-if、v-else、v-else-if 

 <body>
        <div id="app" >       
            <div v-if="type === 'A'" v-bind:style="{ color:colorGreen, fontSize: fontSize + 'px',background:'red' }">内联样式</div>
            <div  v-if="type === 'B'" v-bind:style="styleObject">绑定样式对象</div>
            <div  v-if="type === 'C'" v-bind:style="[styleObject, styleObject1]">多样式绑定</div>
       </body>
    <script src="vue.js"></script>
    <script>
       var app = new Vue({
                el: '#app',
                data:{
                    type:'A',
                    colorGreen: 'green',
                    fontSize: 12 ,
                    styleObject: {
                        color: 'green',
                        fontSize: '30px',
                        background:'red'
                    },
                    styleObject1: {                       
                        fontSize: '12px',
                    }  

                },                                                                                        
         })
    </script>

4、循环 v-for 语句  比 v-if 的优先级高

 <body>
        <div id="app" >       
            <ul>
                <li v-for="site in sites">
                  {{ site.name }}
                </li>
            </ul>
            <ul>
              <li v-for="value in object">
                {{ value }}
              </li>
            </ul>
            <ul>
                <li v-for="(value, key) in object">
                {{ key }} : {{ value }}
                </li>
              </ul>
              <ul>
                <li v-for="(value, key, index) in object">
                 {{ index }}. {{ key }} : {{ value }}
                </li>
              </ul>
         <ul>
          <li v-for="n in 10">
          n
          </li>
        </ul>
</body> <script src="vue.js"></script> <script> var app = new Vue({ el: '#app', data:{ sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ], object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术,更是梦想!' } }, }) </script>

 

标签:el,方法,app,绑定,fontSize,text,new,数据
来源: https://www.cnblogs.com/choii/p/15630302.html