vue插值表达式的和基本标签使用

水深无声 2023-09-30 09:51 3阅读 0赞

Vue的插值表达式\{ \{\}\}  
  主要作用是进行数据绑定，最常见的形式是使用“Mustache”语法（双大括号）的文本插值。例如：Message:\{ \{msg\}\}Mustache标签将会被替代为对应数据对象上msg属性（msg定义在data对象中）的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。

插值表达式：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <p>{
        {
        true?"ok":"no"}}</p>
            <p>{
        {
        2+3}}</p>
            <p>{
        {
        msg}}</p>
            <button v-on:click="fun1('大明战神')">测试</button>
            <input type="text" v-model="user.uname"><br />
            <input type="text" v-model="user.pwd"><br>
        </div>
        <script>
            let vv = new Vue({
        
                el: '#app',
                data: {
        
                    msg: '呵呵',
                    user: {
        
                        uname: 'zhangsan',
                        pwd: 'lisi'
                    }
                },
                methods: {
        
                    fun1: function (m) {
        
                        alert('ddddd');
                        this.msg = m;
                    }
                }
            })
        </script>
    </body>
    
    </html>

效果：  
![在这里插入图片描述][86241d1cf7bf4352946df3ee955f818d.png]

[86241d1cf7bf4352946df3ee955f818d.png]: https://img-blog.csdnimg.cn/86241d1cf7bf4352946df3ee955f818d.png