vue 基础 动态绑定属性 v-bind

vue 动态绑定属性

一、v-bind

• 1v-bind的指令使用

       <div id="app">
          <!-- v-bind 绑定图片地址  路径 -->
          <img :src="imgURL">
          <a :href="ahref">百度</a>
        </div>
        <script src="../js/vue.js"></script>
        <script>           
            setTimeout(function () {
                const app = new Vue({
                    el: "#app",
                    data: {
                        message: "你好呀",
                        imgURL:"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg",

                        ahref:"http://www.baidu.com"
                    },
                });
            },1000);
        </script>

说明：v-bind 简写 : 用于绑定 图片的 地址 或者路径
例: :src 或者 :href

• 2.v-bind动态绑定class(对象)

 <div id="app">
        <!-- <h2 class="active">{{message}}</h2> -->
        <!-- 对象式 绑定样式 -->
        <!-- <h2 :class="{active:isActive}">{{message}}</h2> -->
        <!-- 函数式绑定  用于多个 样式 -->
        <h2 :class="getClass()">{{message}}</h2>

        <button @click="btnClick">按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'你好啊',
                isActive:true,

            },
            methods:{
                // 样式绑定
                getClass:function(){
                    return {active:this.isActive}
                },
                btnClick:function(){
                    this.isActive = !this.isActive
                }
            }
        })
    </script>

说明：
1.在 data中定义 isActive:true
2.对象的方式绑定class :class="{active:isActive}"
3.通过 true 或者 false 来确定 是否绑定
4.或者用一个函数 绑定 :class=“getClass()”
5.在 methods 中 实现这个函数 return {active:this.isActive}
6.还可以通过给按钮绑定点击事件来
改变 data isActive的值 this.isActive = !this.isActive
从而实现 要不要绑定 class样式

• 3.作业：
• 实现一个列表 点击哪一个 把字体成红色

        <style>
            .active {
                color: red;
            }
        </style>
        <div id="app" v-cloak>
             <!-- 当 传递回来的 currentIndex 与 原来的 index  一致 就 赋值样式 -->
            <ul>
                <li
                    v-for="(item,index) in movies"
                    :class="{active :index === currentIndex}"
                    @click="itemClick(index)"
                >
                    {{index}}---{{item}}
                </li>
            </ul>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    movies: ["海王1", "海王2", "海王3", "海王4", "海王5"],
                    currentIndex: 0,
                },
                methods: {
                    //点击返回的索引
                    itemClick: function (index) {
                        this.currentIndex = index
                    },
                },
            });
        </script>

实现步骤：

• 1.在data中定义一个movies
  movies: [“海王1”, “海王2”, “海王3”, “海王4”, “海王5”],
• 2.在app中 用 v-for展示这个列表
  v-for="(item,index) in movies"
• 3.给li 绑定点击事件 传递 index 索引
  @click=“itemClick(index)”
• 4.在data中设置一个 currentIndex = 0，
  currentIndex: 0,
• 5在methods中实现 itemClick方法 把点击时候传递来的 index 赋值给 currentIndex
  itemClick: function (index) {
  this.currentIndex = index
  },
• 6.在绑定样式那里 判断一下 如果 li 原来的 index 等于 currentIndex那么就 值 为 true 进行绑定class 如果不等于就不绑定
  :class="{active :index === currentIndex}"

4.v-bind动态绑定style 对象语法

 <div id="app">
        <!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> -->
        <!-- 样式的属性值 要加 '' -->
        <h2 :style="{fontSize:'50px' }">{{message}}</h2>
        <!-- 样式绑定的对象写法 -->
        <h2 :style="{fontSize:fontSize,backgroundColor: finalColor}">{{message}}</h2>
        <!-- 样式绑定的简写 -->
        <h2 :style="getStyle()">{{message}}</h2>

    </div>
    <script src="../js/vue.js"></script>
    <script>
         const app = new Vue({
                el: "#app",
                data: {
                   message:"你好啊" ,
                   fontSize:'100px',
                   finalColor:'red',
                },
                methods: {
                 getStyle:function(){
                     return {fontSize:this.fontSize,backgroundColor: this.finalColor};
                 }
                },
            });
    </script>

5.v-bind的数组语法

 <div id="app">
        <!-- 数组语法 -->
        <h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
        <!-- 数组语法的简写 -->
        <h2 :style="getStyle()">{{message}}</h2>

    </div>
    <script src="../js/vue.js"></script>
    <script>
         const app = new Vue({
                el: "#app",
                data: {
                   message:"你好啊" ,
                   baseStyle:{backgroundColor:'red'},
                   baseStyle1:{fontSize:'100px'},
                },
                methods: {
                 getStyle:function(){
                     return  [this.baseStyle,this.baseStyle1];
                 }
                },
            });
    </script>