vue基础学习

• 1.动态组件
• 1.1图片
• 1.2换行
• 1.3强调

!

  <div id="app">
        <select name="" id="" v-model="val">
      <option value="father"> father </option>
      <option value="son"> son </option>
    </select>
        <component :is="val"></component>
    </div>
</body>

<script>
    Vue.component('Father', {
        template: '<div> father </div>'
    })
    Vue.component('Son', {
        template: '<div> son </div>'
    })
    new Vue({
        el: '#app',
        data: {
            val: 'son'
        }
    })
</script>

  <div id="app">
        <select name="" id="" v-model="val">
      <option value="father"> father </option>
      <option value="son"> son </option>
    </select>
        <component :is="val"></component>
    </div>
</body>

<script>
    Vue.component('Father', {
        template: '<div> father </div>'
    })
    Vue.component('Son', {
        template: '<div> son </div>'
    })
    new Vue({
        el: '#app',
        data: {
            val: 'son'
        }
    })
</script>

  <div id="app">
        <select name="" id="" v-model="val">
      <option value="father"> father </option>
      <option value="son"> son </option>
    </select>
        <component :is="val"></component>
    </div>
</body>

<script>
    Vue.component('Father', {
        template: '<div> father </div>'
    })
    Vue.component('Son', {
        template: '<div> son </div>'
    })
    new Vue({
        el: '#app',
        data: {
            val: 'son'
        }
    })
</script>



```<h5 id="1.1">1.动态组件</h5>

        
       father 
       son 
    
        
    

</body>

        
       father 
       son 
    
        
    

</body>

        
       father 
       son 
    
        
    

</body>

<h5 id="1">1.动态组件</h5>