vue指令v-bind示例解析

时间：2023-03-08 22:00:47
vue指令v-bind示例解析

1、绑定一个属性

 <img id="app" v-bind:src="data:imageSrc">
 <script>
     var app = Vue({
         el: '#app',
         data: {
             imageSrc: '/images/image.png'
         }
     })
 </script>

2、缩写

 <img id="app" :src="data:imageSrc">
 <script>
     var app = Vue({
         el: '#app',
         data: {
             imageSrc: '/images/image.png'
         }
     })
 </script>

3、内联字符串拼接

 <img id="app" :src="'images/' + fileName">
 <script>
     var app = Vue({
         el: '#app',
         data: {
             fileName: 'image.png'
         }
     })
 </script>

4、class绑定

css代码：

 .classA{
   color: red;
 }
 .classB{
   color: blue;
 }
 .classC{
   font-size: 14px;
 }
 .classD{
   color: green;
 }
 .classE{
   font-size: 30px;
 }
 .classF{
 ;
 }

html代码：

 <div id="app">
   <h6 :class="{classA: isA}">class绑定示例1</h6>
   <h6 :class="[classB, classC]">class绑定示例2</h6>
   <h6 :class="[classD, { classE: isE, classF: isF }]">class绑定示例3</h6>
 </div>
 <script>
   var app = new Vue({
     el: '#app',
     data: {
       isA: true,
       classB: 'classB',
       classC: 'classC',
       classD: 'classD',
       isE: true,
       isF: true
     }
   })
 </script>

5、style 绑定

 <div id="app">
   <h6 :style="{ fontSize: size + 'px' }">style绑定示例1</h6>
   <h6 :style="[styleObjectA, styleObjectB]">style绑定示例2</h6>
 </div>
 <script>
   var app = new Vue({
     el: '#app',
     data: {
       size: 30,
       styleObjectA: {
         fontSize: '30px'
       },
       styleObjectB: {
         color: 'red'
       },
     }
   })
 </script>

6、绑定一个有属性的对象

 <div id="app">
   <p v-bind="{id: ID, attr: attr, other-attr: otherAttr}">绑定一个有属性的对象</p>
 </div>
 <script>
   var app = new Vue({
     el: '#app',
     data: {
       ID: 'myId',
       attr: 'myAttr',
       otherAttr: 'myOtherAttr'
     }
   })
 </script>

7、通过 prop 修饰符绑定 DOM 属性

 <div id="app" :text-content.prop="text">通过 prop 修饰符绑定 DOM 属性</div>
 <script>
   var app = new Vue({
     el: '#app',
     data: {
       text:'text'
     }
   })
 </script>

8、prop 绑定 “prop” 必须在 my-component 中声明

 <div id="app">
   <child :message="boy"></child>
 </div>
 <script>
   Vue.component('child', {
     // 声明 props
     props: ['message'],
     // 就像 data 一样，prop 可以用在模板内
     // 同样也可以在 vm 实例中像“this.message”这样使用
     template: '<span>my name is {{message.name}}, my age is {{message.age}}</span>'
   });

   var app = new Vue({
     el:'#app',
     data:{
       boy:{
         name:'tom',
         age:'50'
       }
     }
   })
 </script>

9、通过 $props 将父组件的 props 一起传给子组件

 <div id="app">
   <father-component :prop="someThing"></father-component>
 </div>
 <script>
   Vue.component('father-component', {
     template: '<child-component v-bind="$props"></child-component>'
   });
   Vue.component('child-component', {
     template: '<h1>自定义组件!</h1>'
   });
   var app = new Vue({
     el: '#app',
     data:{
       someThing:'someBind'
     }
   })
 </script>

10、XLink(没搞明白。。。)

<svg><a :xlink:special="foo"></a></svg>

.camel 修饰符允许在使用 DOM 模板时将 v-bind 属性名称驼峰化，例如 SVG 的viewBox 属性：

<svg :view-box.camel="viewBox"></svg>

在使用字符串模板或通过 vue-loader/vueify 编译时，无需使用 .camel。

相关文章