vue.js的一些小语法v-bind,v-if,v-show,v-else

标签：-o   back   绑定   img   lin   blog   com   nts   htm   

知识点：

     v-bind 动态绑定标签属性

     v-bind 可简写为 :

     使用v-bind 绑定class和内联样式

     使用v-if,v-show,v-else进行条件渲染

<template>
  <div>
(1)    v-bind a标签跳转页面

<a v-bind:href="link">to baidu</a>  <!-- v-bind:==:--> 点击to baidu跳转到百度首页

效果：
  
数据：


   link的值，为跳转的地址 http://www.baidu.com


（2-1） v-bind 绑定class
    <a class="link-href" v-bind:class="className">to baidu1111</a> <!-- className是一个对象-->

效果：
  
数据：
data(){
      return{
        link: ‘http://www.baidu.com‘,
        classStr:‘red-font‘,
        className:{
            ‘red-front‘:true,     true显示，false不显示
             ‘bule-front‘:true,
             ‘yellow-front‘:false
        },

（2-1）
    <a class="link-href" v-bind:class="[classA,{‘red-front‘:hasError}]">to baidu2222</a> <!-- class为一个集合，classA是一个变量，asError也是一个变量-->

效果：
  
数据：

 classA: ‘hello‘,
 hasError:true,

（3）v-bind 绑定内联样式CSS

    <a class="link-href" :style="linkCss">to baidu3333</a>  <!--内联样式CSS-->

效果：
   
数据：

 linkCss:{
            ‘color‘:‘red‘,
            ‘font-size‘:‘20px‘
        },

（4）v-if,v-else,v-show 进行条件渲染

    <a v-if="isPartA">partA</a>   <!--条件渲染--> 如果是isPartA,则显示partA
    <a v-else>no data</a>                        否则显示no data
    <!--<a v-show="!isPartA">partB</a>-->        否则显示 partB

   <button v-on:click="toggle">toggle</button>

效果：点击toggle按钮时，显示partA
  
    再次点击toggle按钮时，显示no data


数据：

      isPartA:true
         }
      },

     methods : {
         addItem () {
        Vue.set(this.list,1,{
            name: ‘pineapple‘,
            price:233
          })
        },

        toggle(){
             this.isPartA=!this.isPartA
        }
     }
  </div>
</template>


<script>
  /* eslint-disable */
  import Vue from ‘vue‘
  import Hello from ‘./components/Hello‘
  import componeta from ‘./components/a.vue‘

export default {
   components:{
       componeta :componeta
   },
    data(){
      return{
        link: ‘http://www.baidu.com‘,
        classStr:‘red-font‘,
        className:{
            ‘red-front‘:true,
             ‘bule-front‘:true,
             ‘yellow-front‘:false
        },
        classA: ‘hello‘,
        hasError:true,
        linkCss:{
            ‘color‘:‘red‘,
            ‘font-size‘:‘20px‘
        },
        isPartA:true
      }
    },

     methods : {
         addItem () {
        /* this.list.push({
           name:‘pineapple‘,
           price:100
         })*/

        Vue.set(this.list,1,{
            name: ‘pineapple‘,
            price:233
          })
        },

        toggle(){
             this.isPartA=!this.isPartA
        }
     }

}
</script>

<!--样式代码-->
<style>
  html {
    height: 100%;
  }
</style>

vue.js的一些小语法v-bind,v-if,v-show,v-else

标签：-o   back   绑定   img   lin   blog   com   nts   htm   

原文地址：http://www.cnblogs.com/shuaifing/p/7897015.html