Vue 响应式渲染 - 模板语法

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 响应式渲染 - 模板语法

目录

模板语法

渲染变量（状态）

绑定事件

简写

事件修改属性

样式修改

绑定图片路径

动态显示和隐藏

总结

---

模板语法

渲染变量（状态）

在页面中直接渲染变量。

示例如下：

    
    
    



    {
  
  {myname}}

 

绑定事件

增加按钮，并对按钮绑定点击事件。

示例如下：

    {
  
  {myname}}
    button

简写

对绑定事件语法进行简写。

示例如下：

事件修改属性

通过绑定的事件来修改属性值。

示例如下：

methods:{
    clickHandle() {
        console.log('点击了按钮')
        this.myname = '我的名字是李四'
    }
}

样式修改

首先设置类样式，然后在div上绑定一个状态，

之后通过动态改变状态值来进行样式修改。

示例如下：

    
    
    
    



    {
  
  {myname}}
    button
    
动态切换class

绑定图片路径

对图片路径进行动态绑定，在点击按钮事件中赋值图片路径。

示例如下：

    {
  
  {myname}}
    button
    
动态切换class
    

动态显示和隐藏

通过对div类进行动态绑定后，使用三目运算法来判断状态值来进行是否显示与隐藏。

点击按钮动态改变设置的状态值。

示例如下：

    
    
    
    



    button
    
动态显示和隐藏

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 响应式渲染 - 模板语法