vue用法示例（一）

1、v-html html 插入，可以插入文本，也可以插入元素，如

message:"
xxx
"


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
        <div v-html="message">zhaocuixia is a beautiful girl!</div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    message: "Hello Vue.js!"
  }
})
</script>
</body>
</html>

2、v-bind 是属性绑定

v-bind: 可以简写为：即

Input 的id和label的for标签实现了点击范围的扩大


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
 
<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1" >
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: true
  }
});
</script>
</body>


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
        {{5+5}}<br>
        {{ ok ? 'YES' : 'NO' }}<br>
        {{ message.split('').reverse().join('') }}
        <div v-bind:id="'list-' + id">菜鸟教程</div> 
</div> 
        
<script>
new Vue({
  el: '#app',
  data: {
        ok: true,
    message: 'RUNOOB',
        id : 1
  }
})
</script>
</body>
</html>

3、v-model双向绑定比如input是即输入又输出


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
        
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>
</body>
</html>

相关阅读:
颠覆传统：探索Web3对传统计算机模式的冲击
[go学习笔记.第十四章.协程和管道] 3.协程配合管道案例以及管道的注意事项和使用细节
华为云分布式缓存服务DCS 8月新特性发布
vscode pandas无法使用
水杯测试用例
Sharding-JDBC（二）- Sharding-JDBC介绍
线性代数本质系列（一）向量，线性组合，线性相关，矩阵
十六.镜头知识之工业镜头的质量判断因素
基于网络数据流的未知密码协议逆向分析
N皇后问题（分支限界法）

原文地址：https://blog.csdn.net/daxiashangxian/article/details/138086249