v-text、v-html、v-bind、v-show 

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
    <style>
        .myPink{color:pink;}
    </style>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
        <hr>
        <h2>v-bind:绑定变量中的值给某属性</h2>
        <img v-bind:src="'img/'+imgUrl" alt="">
        <hr>
        <a v-bind:href="myLink">百度</a>
        <hr>
        <h4 v-bind:style="{backgroundColor:myBGColor}">背景色</h4>
        <button @click="changeBGColor">改色</button>
        <hr>
        <p v-bind:class="{myPink:isPink}">改变字体颜色</p>
        <hr>
        <button v-bind:disabled="!isDisabled">按钮</button>
    </div>
    <script>
        new Vue({
            el:"#container",
            data:{
                msg:"Hello VueJs",
                imgUrl:"1.jpg",
                myLink:"http://www.baidu.com",
                myBGColor:"red",
                isPink:false,
                isDisabled:false
            },
            methods:{
                changeBGColor:function(){
                    this.myBGColor = "pink";
                }
            }
        })
    </script>
 </body>
</html>

 

posted @ 2017-11-01 10:17  匿名的girl  阅读(503)  评论(0)    收藏  举报