vue绑定href_Vue 模板语法

最新推荐文章于 2024-05-03 16:38:25 发布

金晓宇

最新推荐文章于 2024-05-03 16:38:25 发布

阅读量2.9k

点赞数 1

文章标签： vue绑定href

本文链接：https://blog.csdn.net/weixin_36354817/article/details/113450417

版权

模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

文本

数据绑定最常见的形式就是两个大括号{ {}}，大括号中间的内容是data里面的数据，不仅可以是变量还可以是表达式。当绑定的数据对象上的属性值发生改变，插值处的内容就会更新。

示例：

<body>
    <div id="app">
        <!-- 变量 -->
       <p>{
    { message }}</p>
        <!-- 表达式 -->
        <p>{
    { num + 1}}</p>
    </div>
    <script>
        var app = new Vue({
    
            el:"#app",
            data() {
    
                return{
    
                    message: "小飞侠",
                    num: 10
                }
            }
        })
    </script>
</body>
</html>

v-html指令的使用

有时我们可能想要在data中直接定义html代码，如下所示：

<body>
    <div id="app">
        {
    { message }}
    </div>
    <script>
        var app = new Vue({
    
            el:"#app",
            data() {
    
                return{
    
                    message: "<span>0085</span>"
                }
            }
        })
    </script>
</body>
</html>

但是此时浏览器页面中会输出 <span>0085</span>，而不是 0085

最低0.47元/天解锁文章

金晓宇

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue绑定href_Vue 模板语法

模板语法Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。文本数据绑定最常见的形式就是...
复制链接

扫一扫