vue基本基本语法

目录

1、v-bind

2、v-if...v-else-if...v-else

v-if函数

v-if-else 

v-for循环  

---

 

1、v-bind

除了文本插值，我们还可以像这样来绑定元素 attribute

    
    


Java


    鼠标悬停几秒钟查看此处动态绑定的提示信息！

输出效果：

 

如果用

vm.message="hello1" 
'hello1'

 

 

• 这里我们遇到了一点新东西。你看到的 v-bind attribute 被称为指令。
• 指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。
• 可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。
• 如果你再次打开浏览器的 JavaScript 控制台，输入 vm2.message = '新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

 

---

2、v-if...v-else-if...v-else

v-if函数

    
    





    
    
Yes
    
No

 

默认是true  

自己使用进行修改

vm.ok=false

false

 

v-if-else 

    
    




    
    
A
    
B
    
C
    
D

 

默认是A

 

如果使用

vm.type=1
1

 

如果使用

vm.type='B'
'B'
vm.type='C'
'C'

 

 

v-for循环  

    
    




    
    

        {{item.message}}
    

 

输出效果：