[JS][Vue]学习记录之属性绑定

Demo地址
当我们需要动态更改某个属性的值的时候,这里会用到属性绑定

v-bind

v-bind有两种写法:

<div id="app">
    <h1>hello {{name}},I'm {{age}}.</h1>
    <h1>{{study('math')}}</h1>
    //写法1
    <a v-bind:href="website">website</a>
    //写法2
    <a :href="website">website</a>
</div>

<script>
var app = new Vue({
    el:"#app",//el表示元素,一定是与html元素相关的容器元素
    data:{//数据存储
        name : "allen",
        age : 123,
        website:'https://www.baidu.com',
        websiteId:"<a href='https://www.baidu.com'>website</a>",
    },
    methods:{
        study:function (person) {
            return person;
        },
        click:function () {
            alert('hi');
        }
    }
    }
);
</script>

这里可以直接取到website的值.

v-html

v-html可以引入html的元素文本,例如下面引入的就是"<a href='https://www.baidu.com'>website</a>"一个这样的html文本.

<div id="app">
    <p v-html="websiteId"></p>
</div>

<script>
var app = new Vue({
    el:"#app",//el表示元素,一定是与html元素相关的容器元素
    data:{//数据存储
        name : "allen",
        age : 123,
        website:'https://www.baidu.com',
        websiteId:"<a href='https://www.baidu.com'>website</a>",
    },
    methods:{
        study:function (person) {
            return person;
        },
        click:function () {
            alert('hi');
        }
    }
    }
);
</script>

v-on

v-on是用来绑定点击事件,有几种写法

<div id="app">
    <button v-on:click="click">click me</button>
    <button @click="click">click him</button>
</div>
...下面代码省略和上面new vue相同

注意点:

在WS里面手动添加v-bind,v-on的时候,编译器会有红色的提示,可能会以为出错了.其实这不影响运行结果,代码是起作用的,所以可以忽略这种情况,免得给自己带来困扰.