vuejs-basic-examples/03-bind.html at master · ivansieder-xx/vuejs-basic-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!doctype html>
<meta charset="UTF-8">
<title>Vue.js demo</title>

<script src="https://unpkg.com/vue"></script>

<div id="demo">
    <label for="text">Text:</label>
    <input type="text" v-model="text">

    <br>

    <label for="url">URL:</label>
    <input type="text" v-model="url">

    <br>

    <label>Target:</label>
    <input type="radio" name="target" v-model="target" value="_blank" id="blank"><label for="blank">_blank</label>
    <input type="radio" name="target" v-model="target" value="_self" id="self"><label for="self">_self</label>
    <input type="radio" name="target" v-model="target" value="_parent" id="parent"><label for="parent">_parent</label>
    <input type="radio" name="target" v-model="target" value="_top" id="top"><label for="top">_top</label>

    <br>

    <a v-bind:href="url" v-bind:target="target">{{ text }}</a>
</div>

<script>
    const vm = new Vue({
        el: '#demo',
        data: {
            text: null,
            url: null,
            target: null
        }
    })
</script>