当前位置：首页 > article >正文

Vue 响应式渲染 - 模板语法

article 2025/1/27 21:12:23

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

模板语法

渲染变量（状态）

绑定事件

简写

事件修改属性

样式修改

绑定图片路径

动态显示和隐藏

总结

模板语法

渲染变量（状态）

在页面中直接渲染变量。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
    {
  
  {myname}}
</div>
<script>
    new Vue({
        el: "#box", // element
        data: {
            myname: '我的名字是张三'
        }
    })
</script>
</body>
</html>

绑定事件

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

示例如下：

<div id="box">
    {
  
  {myname}}
    <button @click="clickHandle()">button</button>
</div>
<script>
    new Vue({
        el: "#box", // element
        data: {
            myname: '我的名字是张三'
        },
        methods:{
            clickHandle:function () {
                console.log('点击了按钮')
            }
        }
    })
</script>

简写

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

示例如下：

<script>
    new Vue({
        el: "#box", // element
        data: {
            myname: '我的名字是张三'
        },
        methods:{
            clickHandle() {
                console.log('点击了按钮')
            }
        }
    })
</script>

事件修改属性

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

示例如下：

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

样式修改

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

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

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title {
            font-weight: bold;
            color: red;
        }

        .normal {
            font-weight: normal;
            color: #000;
        }
    </style>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
    {
  
  {myname}}
    <button @click="clickHandle()">button</button>
    <div :class="divClass">动态切换class</div>
</div>
<script>
    new Vue({
        el: "#box", // element
        data: {
            myname: '我的名字是张三',
            divClass: 'normal'
        },
        methods: {
            clickHandle() {
                console.log('点击了按钮')
                this.myname = '我的名字是李四'
                this.divClass = 'title'
            }
        }
    })
</script>
</body>
</html>

绑定图片路径

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

示例如下：

<div id="box">
    {
  
  {myname}}
    <button @click="clickHandle()">button</button>
    <div :class="divClass">动态切换class</div>
    <img :src="imgVal" alt="">
</div>
<script>
    new Vue({
        el: "#box", // element
        data: {
            myname: '我的名字是张三',
            divClass: 'normal',
            imgVal: ''
        },
        methods: {
            clickHandle() {
                console.log('点击了按钮')
                this.myname = '我的名字是李四'
                this.divClass = 'title'
                this.imgVal = 'http://www.suicao.com/d/file/2017-04-22/2c2e18007fed6bdd371e86b721f8b119.jpg'
            }
        }
    })
</script>

动态显示和隐藏

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

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

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide {
            display: none;
        }
    </style>
    <script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
    <button @click="clickHandle()">button</button>
    <div :class=" isHide?'hide':'' ">动态显示和隐藏</div>
</div>
<script>
    new Vue({
        el: "#box", // element
        data: {
            isHide:false
        },
        methods: {
            clickHandle() {
                console.log('点击了按钮')
                this.isHide = !this.isHide
            }
        }
    })
</script>
</body>
</html>