vue绑定属性

发布时间:2021-06-16 22:32:08 浏览量:119 标签: vue

Vue实现绑定属性

第一种方法通过v-bind绑定

如果是标签中的属性 ,默认不能直接使用data中的键,也不能使用vue语法,如果需要让属性可以使用vue语法需要绑定属性:

    语法格式:  v-bind  简写为   :属性

例如:

   <div id="app">

        <p>{{name}}</p>

         <p v-if="bool">123123</p>

         <a v-bind:href="hrefs">{{str}}</a>

         <img :src="bool?srcs:srcs2" alt="">

         <button @click="fun()"></button>

    </div>

<script>

    new Vue({

        el:"#app",

        data:{

            name:"小翠翠",

            hrefs:"http://www.4399.com",

            str:"小游戏",

            bool:true,

            srcs2:"百度任意一张图片地址",

            srcs:"百度任意一张图片地址"

        },

        methods:{

           fun(){

                this.bool = false;

           }

        }

    })

</script>


第二种方法使用style属性绑定


<div id="app">

  <button :style="{'color':color}">牛逼的按钮</button>

         <button :style="{'color':bool?'red':'pink'}">牛逼的按钮</button>

</div>

<script>

    new Vue({

        el:"#app",

        data:{

           color:'green',

           bool:true

        }

    })

</script>



vue动态绑定class的几种方法

1. 和绑定style一样使用 ''{}''绑定的值是对象

    一、最简单的写法:   1. class = "类名"

                                :class="{类名:布尔值}"

                                :class = "{类名: 值 == 值2}"

          绑定多个值

               :class="{类名 : 布尔值 , 类名 : 布尔值 .......}"

    二、绑定的值是数组

            :class="[类名 , 类名]"


注意: 在class属性绑定的时候不会影响原来的class



Vue中的循环


循环再vue中起的作用是遍历(迭代)数组

vue中循环的语法格式:    v-for指令

        <元素  v-for"(值 , 键) in 数组"  :key=""></元素>


在vue中声明数组:

        [值,值,值,值]

        读取数组的时候需要指定下标   数组[0]

例如:

    

<div id="app"> 

    <ul>

         <li v-for="(v,k) in arr" :key="k">{{v}}</li>

    </ul>

</div>

<script>

    new Vue({

        el:"#app",

        data:{

          arr:['战三','李四','王五','码子']

        },

        methods:{

          

        }

    })

</script>



Vue的计算方法(computed)

计算方法在调用的时候不能使用()调用

特点:

    在值没有发生改变的时候计算方法值执行一次,但是多次调用数据的渲染是渲染多次的

image.png



搜索
关于我
吴英赫
最新标签
vue
推广