前端UI框架——VueAPI使用之数据绑定

最新推荐文章于 2024-04-12 15:32:24 发布

Blockchain Explorer

最新推荐文章于 2024-04-12 15:32:24 发布

阅读量1.1k

点赞数

分类专栏： Web框架/Vue/ 文章标签： vue 数据绑定 {{}} 数据双向绑定v-model 数据的转绑

本文链接：https://blog.csdn.net/TDCQZD/article/details/82154458

版权

Web框架/Vue/ 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、基本介绍

数据绑定：
1、 {{}} :v-text v-html
2、数据双向绑定v-model
3、数据的转绑 vm.msg
4、数据的强制绑定:v-bind:src / @src

二、代码案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_数据绑定</title>
</head>
<!--
数据绑定：
1、 {{}} :v-text v-html
2、数据双向绑定v-model
3、数据的转绑 vm.msg
4、数据的强制绑定:v-bind:src / @src
-->
<body>
<div id="app">
    <!--1、 {{}}-->
    <p v-text="msg"></p>
    <p>{{text}}</p>
    <p v-html="text"></p>
    <!--2、数据双向绑定v-model-->
    <input type="text" v-model="msg">
    <p>{{msg}}</p>
    <!--4、数据的强制绑定:v-bind:src / @src-->
    <!-- v-bind完整语法 -->
    <img v-bind:src="url" alt="">
    <!-- v-bind缩写 -->
    <img :src="url" alt="">
</div>
</body>
<script src="../js/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            msg:"hello，vue",
            text:`<a href='#'>click</a>`,
            url:"http://www.atguigu.com/images/indexIcon/student/cover.jpg"
        }
    })
    //3、数据的转绑 vm.msg
    let flag = 0;
    setInterval(()=>{
        flag++;
        vm.msg += flag;
    },1000)
</script>
</html>