v-bond和v-if的使用（VUE学习2）

一、v-bond的使用

1.VUE基础框架：

2.在头部定义一个样式，将具有pinkBG类的元素的背景颜色设置为lightpink

3.将Vue应用程序挂载到具有id="app"的div元素上，并使用v-bind指令绑定类，根据vueClass的值动态设置元素的类

4.引入 Vue.js 3 的全局脚本

5.创建 Vue 应用程序

const app=Vue.createApp({})

6.定义数据对象，包含一个名为vueClass的属性，初始值为"pinkBG"

data(){
                return {
                    vueClass:"pinkBG"
                }
            }

7.将 Vue 应用程序挂载到页面上的 #app 元素

app.mounnt('#app')

8.完整程序：

二、v-if的使用

1.设置页面标题

2.将Vue应用程序挂载到具有id="app"的div元素上，

3.使用v-if指令检查text是否包含'pizza'，如果text包含'pizza'，则显示The text includes the word 'pizza'，如果text不包含'pizza'，则显示The word 'pizza' is not found in the text

    

        
The text includes the word 'pizza'
        
    
    
The word 'pizza' is not found in the text

4.引入 Vue.js 3 的全局脚本

5.创建 Vue 应用程序

const app = Vue.createApp({})

6.定义数据对象，包含一个名为text的属性，其中包含一段文本

      data() {
        return {
          text:'I like taco,pizza,Thai beef salad, pho soup and tagine.'
        }
      }

7.将 Vue 应用程序挂载到页面上的 #app 元素

app.mount('#app')

8.完整代码：

  



  

    

        
The text includes the word 'pizza'
        
    
    
The word 'pizza' is not found in the text
  

  

  

9.运行结果