vue模板语法上

本文详细介绍了Vue.js的模板语法,包括插值、指令、过滤器和计算属性等内容。通过示例展示了如何使用{{msg}}进行文本插值,利用v-html输出HTML,v-bind绑定属性,以及使用表达式进行JavaScript运算。还探讨了v-if/v-else/v-else-if条件判断,v-for遍历数组和对象,v-on处理事件,并提到了过滤器的用法和计算属性与监听属性的区别。
摘要由CSDN通过智能技术生成

一、插值

1、文本    { {msg}}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!-- 定义边界 -->
        <div id="app">
            <h3>{ {msg}}</h3>
        </div>
    </body>
    
    <script type="text/javascript">
        <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data() {
                return {msg:'vue你大爷'};
            }
        })
    </script>
</html>

2、html  (  使用v-html指令用于输出html代码        )

 <!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!-- 定义边界 -->
        <div id="app">
            <p>文本</p>
            <h3>{ {msg}}</h3>
            <p>html串,显示带红色字体的内容</p>
            <div v-html="htmlstr"></div>
        </div>
    </body>

    <script type="text/javascript">
        <!-- 绑定边界 
        -->
        new Vue({
            el: '#app',
            data(){
                return{
                    msg: vue你大爷',
                    htmlstr:'<h3 style="color:red;">这是一个html片段</h3>',
            };
        }
        })
    </script>
</html>

3、属性  (  HTML属性中的值应使用v-bind指令)

所有原生态的属性,要利用vue的变量,都需要在对应的属性前加v-bind

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!-- 定义边界 -->
        <div id="app">
            <p>文本</p>
            <h3>{ {msg}}</h3>
            <p>html串,显示带红色字体的内容</p>
        <div v-html="htmlstr"></div>
        <p>vue中的属性</p>
        <!-- 所有原生态的属性,要利用vue的变量,都需要在对应的属性前加v-bind -->
        <a v-bind:href="hrefstr">百度</a>
        <input :value="valuestr"/>

     
        </div>
        </body>
        <script type="text/javascript">
        <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data(){
                return{
                    //ctrl+k 格式化
            msg: 'vue你大爷',
            htmlstr:'<h3 style="color:red;">这是一个html片段</h3>',
            hrefstr:'http://www.baidu.com',
            valuestr:'2223',

         
              };
            }
        })
        
        </script>
    
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值