[C#]OpenCvSharp使用HoughCircles霍夫圆检测算法找出圆位置并计数-CFANZ编程社区

self

简单讲解

1. 视图影响数据

<body>
	<!-- 视图 -->
	<input type="text" id="ipt">
	<script>
		// 数据
		var store = {
			info: ''
		}
		var ipt = document.querySelector('#ipt')
		ipt.addEventListener('keyup', function(e) {
			// console.log(888);
			// console.log(e.target.value)
			store.info = e.target.value
			
		})
	</script>
</body>

2. 数据影响视图

<body>
	<!-- 视图 -->
	<input type="text" id="ipt">
	<script>
		// 数据
		var store = {
			info: ''
		}
		var ipt  = document.querySelector("#ipt")
		Object.defineProperty(store, "info", {
			set: function(newv) {
				// console.log(777)
				console.log(newv)
				ipt.value = newv
			}
		})
	</script>
</body>

3. 视图数据双向影响

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 视图 -->
    <input type="text" id="ipt" />
    <!-- <span id="content"></span> -->
    <script>
      /** ** 数据 ****/
      var store = {
        info: ''
      }
      var temp
      var ipt = document.querySelector('#ipt')
      var content = document.querySelector('#content')
      ipt.addEventListener('keyup', function(e) {
        console.log('"触发键盘事件"----', '触发键盘事件')
        store.info = e.target.value
        // content.innerText = 'input中数据:' + store.info
      })
      Object.defineProperty(store, 'info', {
        /**** set 方法 该属性值发生改变就会触发 ****/
        set: function(newv) {
          console.log('set方法调用------', 'set方法调用')
          console.log('set方法中 newv ------', newv)
          ipt.value = newv
          // store.info = newv
          temp = newv
        },
        /**** get 方法 用该属性的时候触发 ****/
        get: function() {
          console.log('get方法调用------', 'get方法调用')
          // getter 要有 return
          return temp
        }
      })
    </script>
  </body>
</html>

页面展示

在这里插入图片描述

百度

<!DOCTYPE html>
<html>
  <head>
    <title>Vue.js 双向绑定示例</title>
  </head>
  <body>
    <div id="app">
      <input v-model="message" placeholder="编辑我" />
      <p>输入的消息是: {{ message }}</p>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          message: ''
        }
      })

      // 使用Object.defineProperty实现响应式
      let data = {}
      Object.defineProperty(data, 'message', {
        get() {
          return vm.message
        },
        set(newValue) {
          vm.message = newValue
        }
      })

      // 当输入框的值变化时，data.message也会更新
      // 当data.message更新时，Vue的响应式系统会更新视图
    </script>
  </body>
</html>

在这里插入图片描述

目录

self

简单讲解

1. 视图影响数据

2. 数据影响视图

3. 视图数据双向影响

页面展示

百度