Vue.js(二)---相关语法介绍第二部分

v-text和v-html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-txet/v-html/v-bind</title>
        <script type="text/javascript" src="js/Vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-text="message"></div>
            <div v-html="message"></div>
            <!-- <div id="div1"></div>
            <div id="div2"></div> -->
        </div>
    </body>
    <script>
        //vue
        new Vue({
            el:'#app',
            data:{
                message:'<h1>hello vue</h1>'
            }
        });
        //传统的innerText和innerHtml
        /* window.onload=function(){
            document.getElementById("div1").innerHTML="<h1>hello</h1>";
            document.getElementById("div2").innerText="<h1>hello</h1>";
        } */
    </script>
</html>

v-bind绑定操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-bind</title>
        <script type="text/javascript" src="js/Vue.js"></script>
    </head>
    <body>
        <div id="app">
            <font size="5" v-bind:color="ys1">百度</font>
            <font size="5" v-bind:color="ys2">腾讯</font>
        </div>
    </body>
    <script>
        new Vue({
            //注意差值表达式不能用于html标签的属性取值
            //要想给html标签的属性设置变量的值,需要使用v-bind
            el:'#app',
            data:{
                ys1:"red",
                ys2:"yellow",
            }
        });
    </script>
</html>

posted @ 2020-07-12 16:50 IT特工阅读(235) 评论(0) 收藏举报

刷新页面返回顶部

IT特工

Vue.js(二)---相关语法介绍第二部分

公告