Vue学习--

vue

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="http://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>

<div >

<pre><a v-bind:href="url">菜鸟教程</a></pre>

</div>
<!--根据js中绑定的值,在a标签中显示,并且根据js中绑定的跳转连接,显示到html中-->

<div >

<pre><a v-bind:href="url">{{me}}</a></pre>

</div>

<div >  <!-- 根据input中输入的值同步修改p标签中显示的值 -->

  <p>{{ message }}</p>

  <input v-model="message">

</div>

<script>

new Vue({

el: '#app',

data: {

url: 'http://www.runoob.com'

}

})

new Vue({

el:'#ning',

data:{

url:'http://www.baidu.com',

me:"百度"

}

})

 

new Vue({

  el: '#app',

  data: {

    message: 'Runoob!'

  }

})

</script>

</body>

</html>

以上是 Vue学习-- 的全部内容, 来源链接: utcz.com/z/377325.html

回到顶部